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

Question

[Ribachok]

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

<select>
<option>Светлый</option>
<option>Темный</option>
</select>

Заранее спасибо.

Comments

[Дмитрий]

Добрый вечер.
Это обычный html, он ничего не выполняет.
Где код, которым Вы пытались обработать нужные данные?

[SteavyWonder]

Добрый вечер. Используйте относительные ссылки. Подробнее тут.

Answer 1

[Alex]

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

Answer 2

[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>