Задать вопрос
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), там уже такой способ не идет.
  • Вопрос задан
  • 553 просмотра
Комментировать
Подписаться 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 ₽
Бэкэнд-разработчик JavaScript
Wanted. • Москва
от 250 000 до 400 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработка Roguelike-игры на Unity для Android
26 дек. 2024, в 01:11
120000 руб./за проект
Доработка веб-платформы на PHP
26 дек. 2024, в 00:27
35000 руб./за проект
Нарисовать обложку для рекламной кампании в VK Ads
25 дек. 2024, в 22:59
1000 руб./в час
Ещё заказы