Изменить с помощью onclick .js

#javascript #html #hyperlink #onclick #href

#javascript #HTML #гиперссылка #onclick #href

Вопрос:

Я хотел бы изменить стиль сайта, щелкнув значок

 <head>
<meta charset="utf-8">
<link rel="stylesheet" href="styled.css" id="styles">
</head>
 

Мне трудно попасть в href. На данный момент я написал этот скрипт:

 <script>
    function changeTheme(){
    document.querySelector("link[href='styled.css']").href = "style.css";
    }            
</script>
 

но это работает только в одну сторону, и я хочу что-то подобное:
(первый щелчок) styled.css -> style.css
(второй щелчок) style.css -> styled.css.
Я чувствую, что плохо запустил эту функцию, поэтому прошу о помощи. Как должен выглядеть действительный скрипт?

Ответ №1:

Используйте if-else:

 function changeTheme() {
  const link = document.getElementById('styles');
  if (link.href.includes('d')) {
    link.href = 'style.css';
  } else {
    link.href = 'styled.css';
  }
}