Javascript 在两个CSS工作表之间切换

我想在两个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>

<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>

您可以根据myButton上当前显示的文本来决定选择哪个css文件。如果是“高对比度模式”，则使用其他模式，反之亦然

比如：

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;
  }
}

比在两个样式表之间切换更可靠的方法是将所有样式都放在一个样式表中


document.getElementById（“切换对比模式”）.addEventListener（“单击”，函数（）{
document.body.classList.toggle（“HighControlMode”）；//添加或删除类。
});
正文{
保证金：0；
背景色：白色；
}
导航{
宽度：100%；
高度：60px；
背景色：rgb（160160160）；
}
body.high模式{
背景色：黑色；
}
.高对比度模式导航{
背景色：rgb（40,40,40）；
}

切换对比度
可能是if/else语句？使用单个样式表并仅切换类更好、更可靠。例如，给主体一个类
highcontrastmode
，并添加如下样式表：
body.highcontrastmode nav{…}
。然后用JavaScript简单地从
主体
节点添加/删除该类