Задать вопрос
Mike07
@Mike07
javascript

Как правильно реализовать переключение между CSS стилями?

Тут два вопроса:
1). Как правильно реализовать переключение между двумя файлами стиля? Есть, например, в папке темы style1.css и style2.css Как сделать, чтобы по нажатию на кнопку/ссылку сайт менял внешний вид одного файла стиля на другой (и обратно?)
2). Как правильно реализовать переключение между классами стиля? Например, имеется только style1.css И в нем есть .main и .body, у обоих есть параметр width, которые равны, ну, например, 1280 и 800. Как сделать переключение между 600/400, 1280/800, 1500/1000 и т.д. Чтобы по клику на кнопку/ссылку сайт расширялся или сужался? Или просто каждой кнопке задать определенный параметр селектора (main, body)

Я находил в Интернете советы к пункту 1) просто сделать внутри css стиля другой css стиль. Но у меня нет желания смешивать одно с другим т.к. стиль я хочу поменять по многим параметрам.
По пункту 2) я смог реализовать такое между не повторяющимися параметрами (background). Но те, которые повторяются (width), там уже такой способ не идет.
  • Вопрос задан
  • 551 просмотр
Комментировать
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ответы на вопрос 1
Jukk
@Jukk 
function changeCSS(cssFile, cssLinkIndex) {

    var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

    var newlink = document.createElement("link");
    newlink.setAttribute("rel", "stylesheet");
    newlink.setAttribute("type", "text/css");
    newlink.setAttribute("href", cssFile);

    document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
}


<html>
    <head>
        <title>Changing CSS</title>
        <link rel="stylesheet" type="text/css" href="positive.css"/>
    </head>
    <body>
        <a href="#" onclick="changeCSS('positive.css', 0);">STYLE 1</a> 
        <a href="#" onclick="changeCSS('negative.css', 0);">STYLE 2</a>
    </body>
</html>
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Провести подготовку и перенос данных из 1С УТ в 1С управление нашей фи
22 нояб. 2024, в 17:46
20000 руб./за проект
Доработать функционал загрузки прайсов в БД
22 нояб. 2024, в 17:43
5000 руб./за проект
Нужен верстальщик. Переверстать, доверстать, доработать интерфейс
22 нояб. 2024, в 16:13
7000 руб./за проект
Ещё заказы