Не получается реализовать переключение css стиля. Как это исправить?

Question

[HexJean]

Я хочу, чтобы у меня была кнопка/кнопки, по которым можно было бы переключать между style1.css и style2.css на сайте.

Я пытался сделать это по разному. И самый простой путь у меня не работает:
Скрипт:

<script>
	function changeCSS(cssFile, cssLinkIndex) {

    var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
	
    var newlink = document.createElement("link");
    newlink.setAttribute("rel", "stylesheet");
    newlink.setAttribute("type", "text/css");
    newlink.setAttribute("href", "<?php echo get_stylesheet_directory_uri(). '/style2.css' ?>");

    document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
}
	</script>

Ссылки:

<a href="#" onclick="changeCSS('style.css', 0);">STYLE 1</a> 
<a href="#" onclick="changeCSS('style2.css', 0);">STYLE 2</a>

Я пытался сделать совсем примитивные способы:
В

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(). '/style.css' ?>" type="text/css" media="screen" title="style"/>
<link rel="stylesheet alternate" href="<?php echo get_stylesheet_directory_uri(). '/style2.css' ?>" id="light" title="Light">

Скрипт

<script>
function enableStylesheet (node) {
  node.rel = 'stylesheet';
}

function disableStylesheet (node) {
  node.rel = 'alternate stylesheet';
}
</script>

Кнопки:

<a href="#" onclick="enableStylesheet()"> Style </a>
<a href="#" onclick="disableStylesheet()"> Style2 </a>

Что не так? Почему оно не работает?

p.s
Еще один бесполезный способ:

function setStyleSheet(url){
       var stylesheet = document.getElementById("stylesheet");
       stylesheet.setAttribute('href', url);
    }

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(). '/style.css' ?>" type="text/css" media="screen" title="deep"/>
	<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(). '/style2.css' ?>" id="light" title="Light" media="none">

<a onclick="setStyleSheet('<?php echo get_stylesheet_directory_uri(). '/style.css' ?>')" href="#">Style 1</a>
<a onclick="setStyleSheet('<?php echo get_stylesheet_directory_uri(). '/style2.css' ?>')" href="#">Style 2</a>

Answer 1

[Виталий]

document.querySelector('link[href="style1.css"]').href = 'style2.css'; и все

<link id="style" href="style2.css"  rel="stylesheet">
<a onclick="setStyle('style.css')" href="#">Style 1</a>
<a onclick="setStyle('style2.css')" href="#">Style 2</a>

<script>
function setStyle(css) {
  document.querySelector('link#style').href = css;
}

</script>

(но лучше креатнуть dom изначально чтоб загрузку новую не делать)

Comments

[HexJean]

не работает

[Виталий]

HexJean, https://jsfiddle.net/7c92Ldwb/

[HexJean]

Виталий, заработало

[HexJean]

Виталий, вот только не сохраняет :(

[Виталий]

HexJean, Для этого записывай выбранный вариант в куки