Mike07
@Mike07

Как правильно реализовать переключение между 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), там уже такой способ не идет.
  • Вопрос задан
  • 502 просмотра
Пригласить эксперта
Ответы на вопрос 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>
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
28 мар. 2024, в 21:25
2000 руб./за проект
28 мар. 2024, в 21:17
5000 руб./за проект
28 мар. 2024, в 20:46
150000 руб./за проект