@Ribachok

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

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

Заранее спасибо.
  • Вопрос задан
  • 147 просмотров
Пригласить эксперта
Ответы на вопрос 2
etrid
@etrid
Можно стиль записывать в сессию php и подгружать исходя из нее.
При нажатии на кнопку, перезагружать страницу с GET параметром, переназначать сессию.
Ответ написан
Комментировать
@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>
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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