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>

对我来说，最好的方法是在2个CSS文件之间切换，而不仅仅是将highContrast.css作为参数传递？我当时正在考虑使用for循环和％2来完成此操作。但是我确信有一种更干净的方法。

最后，用于更新文本的部分也不起作用。我认为我的文本定位不正确，可以通过switch语句将其修复为正确更新，但是我不确定如何编写。

有人可以帮忙吗？

谢谢。

Answer 1

您可以根据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;
  }
}

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>

在2个CSS表之间切换

2 个答案: