@al_zakharov

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

Есть сайт и 7 цветовых схем. Необходимо реализовать, чтобы при клике на кнопку подключался внешний css файл, который поменяет стиль, согласно своему содержанию. Таких кнопок соответственно будет 7, как css файлов. Подскажите как реализовать.
  • Вопрос задан
  • 3786 просмотров
Решения вопроса 1
webdevfan
@webdevfan
CEO & Co-Founder "Wacdis"
Не подключением файлов нужно реализовывать... А вообще, подключить файл стилей на лету можно так:
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')

Писал без проверки с мобилы... Так что если есть ошибки, не серчайте :). Работает по принципу "Если нет, добавил, если есть, отключил или подключил"
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
Изращениями какими-то занимаетесь. Я более чем уверен что вся цветовая схема влезает в пару строчек стилей, и мучать юзера дополнительным http реквестом при каждой смене темы это очень плохая идея. Просто сделайте для каждой цветовой схемы глобальные классы для body или основного контейнера и по клику меняйте их. Выбранную схему просто потом сохраняете в localStorage или вообще на сервере можете даже хранить, если юзер логинится.
Ответ написан
Комментировать
@Stopy
Пускай будет по кнопке переключении темы перезагрузка страницы с записью в куках о выборе цветовой темы, а в шаблоне вьюхи подключать стиль именно тот в котором нужная тема.
Ответ написан
@lega
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы