@HexJean

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

Я хочу, чтобы у меня была кнопка/кнопки, по которым можно было бы переключать между 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>
  • Вопрос задан
  • 111 просмотров
Решения вопроса 1
@DOG729
Web Developer
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 изначально чтоб загрузку новую не делать)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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