@Ribachok

Как менять css файл через select?

Доброго времени суток. Решил сделать смену css файлов через select, да только не получается. И возможно ли сделать это без php?
Вот мой select. Пробовал все что можно. Может вы знаете как это организовать?
<select>
<option>Светлый</option>
<option>Темный</option>
</select>

Заранее спасибо.
  • Вопрос задан
  • 130 просмотров
Пригласить эксперта
Ответы на вопрос 3
etrid
@etrid
Full Stack Web Developer
Можно стиль записывать в сессию php и подгружать исходя из нее.
При нажатии на кнопку, перезагружать страницу с GET параметром, переназначать сессию.
Ответ написан
Nolis
@Nolis
it-гопник
document.getElementsByTagName('style') [0].href = 'адрес css-файла'

попробуй, но не думаю, что что-то из этого выйдет
как вариант установить одинаковый префикс у классов, далее пробегаться по ним, удалять какую-то часть и заменять.
Например:
header__menu-light
header__logo-light

Далее через JS ищем подобные классы и меняем их на:
header__menu-dark
header__logo-dark

В принципе опять же обходимся одним CSS файлом.
Ответ написан
@Absolute138
Набросал на буквально на коленке. Если подключен jQuery, то лучше через него т.к. метод remove() в старых браузерах недоступен. Ну или полифил. Или через removeChild переписать - еще лучше.
<select id="styles">
  <option>None</option>
<option data-url="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">Светлый</option>
<option data-url="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">Темный</option>
</select>
<script>
  function createStyle(url){
    var style = document.createElement('link');
    style.rel = 'stylesheet';
    style.type = 'text/css';
    style.id = 'currentstyle';
    style.href = url;
    return style;
  }
  document.getElementById('styles').onchange = function(){
    var el = document.getElementById('currentstyle');
    if(el !== null){
      el.remove();
    }
    var obj = this.options[this.selectedIndex].dataset;
    if(!Object.keys(obj).length){
      return;
    }
    document.head.appendChild(createStyle(obj.url));
  }
</script>
Ответ написан
Ваш ответ на вопрос

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

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