Переключение таблицы стилей по клику. Как реализовать?

Question

[al_zakharov]

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

Answer 1

[Ярослав Алексеенко]

Не подключением файлов нужно реализовывать... А вообще, подключить файл стилей на лету можно так:

var link = document.createElement("link")
link.type = "text/css"
link.rel = "stylesheet"
link.href = url
document.getElementsByTagName("head")[0].appendChild(link)

Где url - адрес к файлу стилей

Спасибо Макс Минимус за подсказку...
Рецепт следующий:

var cssUrls = []
var loadCss = function(url) {
  var ind = cssUrls.indexOf(url)
  if(ind == -1) {
    cssUrls.push(url)
    var link = document.createElement("link")
    link.id = ('css' + cssUrls.length)
    link.type = "text/css"
    link.rel = "stylesheet"
    link.href = url
    document. getElementsByTagName("head")[0].appendChild(link)
  } else {
    document.getElementById('css' + ind).disabled = !document.getElementById('css' + ind).disabled
  }
}

loadCss('/css/colors/darkblue.css')

Писал без проверки с мобилы... Так что если есть ошибки, не серчайте :). Работает по принципу "Если нет, добавил, если есть, отключил или подключил"

Comments

[Alexander Litvinenko]

document.querySelector("head")

[Дмитрий Беляев]

Alexander Litvinenko: document.head еще короче если на то пошло))

[Alexander Litvinenko]

Дмитрий Беляев: посидим немного, еще сократим =)

[Ярослав Алексеенко]

...закидали какашками :))) сократить можно вообще в 1 строку

[lega]

> так как отключить их некак...

Стили отключаются если удалить соответсвующий style элемент который их подключил.

[al_zakharov]

Спасибо мужик!

Answer 2

[Nikolay Talanov]

Изращениями какими-то занимаетесь. Я более чем уверен что вся цветовая схема влезает в пару строчек стилей, и мучать юзера дополнительным http реквестом при каждой смене темы это очень плохая идея. Просто сделайте для каждой цветовой схемы глобальные классы для body или основного контейнера и по клику меняйте их. Выбранную схему просто потом сохраняете в localStorage или вообще на сервере можете даже хранить, если юзер логинится.

Answer 3

[Stopy]

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

Comments

[Ярослав Алексеенко]

Я бы цветовую схему засунул бы под класс и его добавлял бы в body тот же, поменял класс - поменял схему...

Answer 4

[lega]

jsfiddle.net/lega911/t267p05r