Как менять css-файл с помощью JS и возвращать изначальное значение?

Question

[Дмитрий]

Добрый день!

Я только начинаю постигать JavaScript и возник вопрос. Необходимо по нажатию кнопки менять href атрибут в теге link для замены css файла.

Написал функцию:

function changeCss() {
document.getElementById("styleBright").href="css/style.css";
}

Подключил к кнопке с помощью onclick. Вот теперь встал вопрос, как проверять значение атрибута href тега link и в зависимости от того, что там стоит менять href между двумя файлами при нажатии все на ту же кнопку?

В голове крутиться вариант с if, но на что проверять его не понимаю.

Answer 1

[Андрей Хохлов]

Ну возьмите текущее значение атрибута и в зависимости от него сделайте что нужно.

var link = document.getElementById("styleBright"),
    href = link.getAttribute('href');

if(href == 'css/style.css') {
    // do something
} else if (href == 'css/style2.css') {
    // do something
}

Answer 2

[VisualIdeas]

Может я ошибаюсь, но может так:

if (document.getElementById("styleBright").href==="css/style.css") {
//что-то делаем
} else {
//чтото делаем, например:
document.getElementById("styleBright").href="css/style.css";
}

ПС: document.getElementById("styleBright") я бы вынес в переменную естесно

Answer 3

[Дмитрий]

Всем спасибо! Я пошел другим путем:

function changeCss() {
		document.getElementById("styleBright").href="css/style.css";
		document.getElementById("switcher").value="Back to default";
		document.getElementById("switcher").onclick = changeCssToDefault;
	}
	
	function changeCssToDefault() {
		document.getElementById("styleBright").href="css/main.css";
		document.getElementById("switcher").value="Switch the light";
		document.getElementById("switcher").onclick = changeCss;
	}

Comments

[Андрей Хохлов]

Некрасиво же

[Дмитрий]

Андрей Хохлов: согласен. В финальную версию возьму Ваш вариант. Я сделал на скорую руку, чтобы поскорее начать разбираться с localStorage. Хочется, чтобы сохранялся выбор пользователя в плане стиля, даже после закрытия браузера)