Переключение между двумя листами CSS

Question

Я хочу переключаться между 2 листами CSS. У меня почти работает код, но он переключается только один раз, и я не уверен, что это лучший способ реализовать переключение, чтобы я мог переходить туда-сюда, туда-сюда.

Я хочу переключаться между «normal.css» и «highContrast.css» с помощью одной кнопки и обновлять текст кнопки при каждом изменении.

В моем HTML у меня есть:

  <div class="high">
                <button class="normal" id="myButton" value="Hover" onclick="changeClass('css/highContrast.css', 0)" ">High Contrast Mode</button>
              </div>

В моем JS у меня есть:

<script>
    function changeClass(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", cssFile);
      document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);

  document.getElementsByClassName("normal").setAttribute("text", "Normal mode");
  var div = document.getElementById ("myButton");
  div.onclick= "changeClass('css/style.css', 0)";

      }
</script>

Каков наилучший способ для меня, вместо того, чтобы просто передать highContrast.css в качестве параметра, переключаться между двумя CSS-файлами? Я думал сделать это с помощью цикла for и% 2 .... но я уверен, что есть более чистый путь.

Кроме того, последняя часть для обновления текста также не работает. Я предполагаю, что я нацеливаю текст неправильно, и я мог бы исправить его, чтобы корректно обновить с помощью оператора switch, но я не уверен, как его написать.

Может кто-нибудь помочь, пожалуйста?

Спасибо.

Answer 1

Вы можете решить, какой файл CSS выбрать, основываясь на тексте, который в данный момент отображается на кнопке myButton. Если это «Режим высокой контрастности», используйте другой и наоборот.

Что-то вроде:

function changeClass() {
  var text = document.getElementById("myButton").firstChild.data;
  switch (text) {
    case "High Contrast Mode":
      // apply normal mode css

      // switch text on button
      document.getElementById("myButton").firstChild.data = "Normal Mode";
      break;
    case "Normal Mode":
      // apply high contrast mode css

      // switch text on button
      document.getElementById("myButton").firstChild.data = "High Contrast Mode";
      break;
  }
}

Answer 2

Более надежным способом, чем переключение между двумя таблицами стилей, было бы использование всех стилей в одной таблице стилей.

document.getElementById("toggleContrastMode").addEventListener("click", function() {
    document.body.classList.toggle("highcontrastmode"); // Add or remove the class.
});

body {
  margin: 0;
  background-color: white;
}

nav {
  width: 100%;
  height: 60px;
  background-color: rgb(160, 160, 160);
}

body.highcontrastmode {
    background-color: black;
}

.highcontrastmode nav {
    background-color: rgb(40, 40, 40);
}

<nav></nav>
<button id='toggleContrastMode'>Toggle contrast</button>