«
»

Динамическое изменение CSS-файлов со стилями

2010-07-16

HTML и JavaScript позволяют динамически изменять CSS-файлы со стилями.

Допустим у нас есть сайт, и несколько дизайнерских оформлений, которые вынесенные в различные CSS-файлы. К примеру: один в тёмном оформлении «dark.css», а второй — в светлом «light.css».

Приведенный ниже пример демонстрирует возможность динамического переключения файлов со стилями:

<html>
<head>
<title>Динамическая смена CSS-файлов со стилями</title>
<link id="CSSsource" href="light.css" rel="stylesheet" />
</head>
<body>
...
<input
type="button"
value="изменить стиль на тёмный"
onclick="document.getElementById('CSSsource').href='dark.css'"
/>
...
</body>
</html>

Таким образом изменяя значение атрибута href тега link, определяющего файл со стилями, мы можем динамически изменить все стили.



3 комментария на «Динамическое изменение CSS-файлов со стилями»

  1. Константин:
    2015-05-13 в 12:11

    А как сделать чтобы на всех страницах данный стиль сохранился?

  2. admin:
    2015-05-14 в 08:13

    Допустим — хранить в кукки или локалсторидже информацию о измененном стиле, и если он отличается от стиля по умолчанию — изменять его при старте на других страницах.
    Если файл стиля был подгружен ранее — он должен остаться и кэше браузера.

  3. Ярослав:
    2021-07-10 в 10:15

    А как сделать обратной переключение?

Добавить комментарий