Замена css-файла на лету (и применение нового стиля к странице)

У меня есть страница, которая имеет в заголовке, который загружает CSS с именем light.css . У меня также есть файл с именем dark.css . Я хочу, чтобы кнопка обменивала стиль страницы вместе (в css-файле используется 40 селекторов, а некоторые не совпадают в двух файлах).

Как удалить ссылку на light.css с помощью JS и удалить все стили, которые были применены, а затем загрузить dark.css и применить все стили? Я не могу просто сбросить все элементы, так как некоторые стили применяются через разные css-файлы, а некоторые из них динамически генерируются JS. Есть ли простой, но эффективный способ сделать это без перезагрузки страницы? Vanilla JS предпочтительнее, однако я буду использовать jQuery для последующей обработки в любом случае, поэтому jQ также прекрасен.

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

Javascript:

 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:

   Changing CSS    STYLE 1 STYLE 2   

Для простоты я использовал встроенный javascript. В производстве вы хотели бы использовать ненавязчивых слушателей событий.

Вы можете включить все таблицы стилей в документ, а затем активировать / деактивировать их по мере необходимости.

При чтении спецификации вы можете активировать альтернативную таблицу стилей, изменив ее disabled свойство от true до false , но только Firefox, похоже, делает это правильно.

Поэтому я думаю, что у вас есть несколько вариантов:

Переключить rel=alternate

     

Установить и disabled

     

Переключить media=none

     

Вы можете выбрать узел таблицы стилей с getElementById , querySelector и т. Д.

(Избегайте нестандартного . Установка HTMLLinkElement # отключена, хотя.)

Используя jquery, вы можете поменять файл css. Сделайте это нажатием кнопки.

 var cssLink = $('link[href*="light.css"]'); cssLink.replaceWith(''); 

Или как ответ Сэма , это тоже работает. Вот синтаксис jquery.

 $('link[href*="light.css"]').prop('disabled', true); $('link[href*="dark.css"]').prop('disabled', false); 

Если вы установили идентификатор элемента ссылки

  

вы можете настроить его с помощью Javascript

 document.getElementsByTagName('head')[0].getElementById('stylesheet').href='stylesheet2.css'; 

или просто..

 document.getElementById('stylesheet').href='stylesheet2.css'; 

Вот более обстоятельный пример:

      Style 1 Style 2  

Этот вопрос довольно старый, но я бы предложил подход, который здесь не упоминается, в который вы будете включать оба CSS-файла в HTML, но CSS будет подобен

light.css

 /*** light.css ***/ p.main{ color: #222; } /*** other light CSS ***/ 

и dark.css будет как

 /*** dark.css ***/ .dark_layout p.main{ color: #fff; background-color: #222; } /*** other dark CSS ***/ 

basicall каждый селектор в dark.css будет дочерним .dark_layout

Затем все, что вам нужно сделать, это изменить class элемента body, если кто-то выбирает тему темы веб-сайта.

 $("#changetheme").click(function(){ $("body").toggleClass("dark_layout"); }); 

И теперь все ваши элементы будут иметь темный css, как только пользователь нажмет на #changetheme . Это очень легко сделать, если вы используете какие-либо препроцессоры CSS.

Вы также можете добавить анимацию CSS для фона и цветов, что делает переход очень гладким.

Используя jquery .attr (), вы можете установить href вашего тега link .ie

Образец кода

 $("#yourButtonId").on('click',function(){ $("link").attr(href,yourCssUrl); }); 

Может быть, я думаю слишком сложно, но поскольку принятый ответ не работал на меня, я думал, что тоже поделюсь своим решением.

История:
То, что я хотел сделать, это включить различные «скины» моей страницы в голове в виде дополнительных таблиц стилей, которые добавляются в «основной» стиль и переключают их, нажимая кнопку на странице (без настроек браузера или других).

Проблема:
Я думал, что решение @ sam было очень изящным, но для меня это не сработало. По крайней мере, часть проблемы заключается в том, что я использую один основной файл CSS и просто добавляю других сверху как «скины», и поэтому мне пришлось сгруппировать файлы с отсутствующим свойством title .

Вот что я придумал.
Сначала добавьте все «скины» в голову, используя «alternate»:

     

Обратите внимание, что я дал основному файлу CSS заголовок = ‘main’, а все остальные – class = ‘style-skin’ и без названия.

Для переключения скинов я использую jQuery. Я оставляю это до пуристов, чтобы найти элегантную версию VanillaJS:

 var activeSkin = 0; $('#myButton').on('click', function(){ var skins = $('.style-skin'); if (activeSkin > skins.length) activeSkin=0; skins.each(function(index){ if (index === activeSkin){ $(this).prop('title', 'main'); $(this).prop('disabled', false); }else{ $(this).prop('title', ''); $(this).prop('disabled', true); } }); activeSkin++ }); 

Что он делает, он выполняет итерацию по всем доступным скинам, принимает (скоро) активный, устанавливает заголовок в «main» и активирует его. Все остальные скины отключены и название удалено.