Как при нажатии на кнопку или элемент сменить файл CSS?

Question

[ceverianin]

Вот вариант смены файла CSS, но он не работает:

$('.newC').click(function () {
                $('link[href="css/myCSS.css"]').attr('href', 'css/newCSS.css');
            });
            $('.newC').click(function () {
                $('link[href="css/newCSS.css"]').attr('href', 'css/myCSS.css');
            });

В чём может быть ошибка?

<link href="css/myCSS.css" rel="stylesheet" type="text/css"/>

<div class="versiusBad"><button class="newC">
              <i class="fa fa-eye" aria-hidden="true"></i>Кнопка файла стилей</button>
</div>

Answer 1

[Александр]

А какова цель данного подхода? Что Вы хотите решить? И теоретически всё работает, только Вы назад myCSS устанавливаете.

Comments

[ceverianin]

Необходимо при нажатие на кнопку сменить стили у большинства элементов. А так же подразумевается, что когда пользователь повторно нажмёт на кнопку, myCSS обратно устанавливается.

[Александр]

ceverianin,

$('.newC').click(function () {
	let element = $('link[href="css/myCSS.css"]');

	if (element.attr('href').includes('newCSS')) {
		element.attr('href', 'css/myCSS.css');
	} else {
		element.attr('href', 'css/newCSS.css');
	}
});

Answer 2

[Алексей Ярков]

Ну так у вас 2 обработчика. Смена произойдёт туда и сразу обратно.

Comments

[ceverianin]

Спасибо, в этой ошибке я теперь разобрался. Я пробовал через id и 2 элемента. Но смены так и не произошло. В чём может быть ошибка?

<script>
            $('#one').click(function () {
                $('link[href="css/myCSS.css"]').attr('href', 'css/newCSS.css');
            });
            $('#two').click(function () {
                $('link[href="css/newCSS.css"]').attr('href', 'css/myCSS.css');
            });
        </script>

<div id="one">Первый вариант</div>
        <div id="two">Второй вариант</div>

Answer 3

[Даниил Руднев]

Попробуй
Не шарю в jquery, но ошибка скорее всего в том, что href показывает полный путь, а не относительный.