当取消选中复选框输入时，页面内容恢复正常（和以前一样）

Question

所以我想在选中复选框输入时更改页面的一些内容，并在取消选中复选框时将所有内容恢复到原来的状态。

    <div class="switch">
        <input type="checkbox" name="checkbox" id="checkbox" onchange="darkmode(this)" />
    </div>

    <section id="section">
    <p>This is a line</p>
    </section>

    <script>
        function darkmode(checkboxElem) {
          if (checkboxElem.checked) {
            document.body.style.backgroundColor = "black";
            document.getElementById("checkbox").style.borderColor = "white";
            document.getElementById("section").style.color ="white"; 
          }else {
            document.body.style.backgroundColor = "white";
            document.getElementById("checkbox").style.borderColor = "black";
            document.getElementById("section").style.color ="black"; 
          }
        }   
    </script>

我想我可以通过为每个更改的内容赋予价值来做到这一点。在 'else' 语句中，我将不得不给每个内容它是 'as it was before' 的值这样做会花费很多时间，我将不得不将所有内容都写两次（在 CSS 和 Javascript).

如果有一种方法可以在取消选中复选框时将所有内容都设置为默认值，而无需为每个元素提供其先前的值。请告诉我。

谢谢

Answer 1

我认为最简单明了的解决方案是设计链接到正文的暗模式样式 css class 并直接使用 onchange 事件切换 class。

希望解决方案对您有所帮助。

body.dark-mode{
  background-color:black;
}
  body.dark-mode>h1{
    color:red;
  }
  body.dark-mode>p{
    color:white;
  }

<body>
 <input type='checkbox' onchange='document.body.classList.toggle("dark-mode");'>
 <h1>Heading 1</h1>
 <p>Paragraph 1</p>
 ...
</body>

Answer 2

最简单的解决方案是在正文中添加和删除 class，如下面的代码片段所示。然后你在 css 中删除暗模式的所有样式。重要的是，它写在正常 css.

的底部

function darkmode(checkboxElem) {
  var darkMode = document.body;
  if (checkboxElem.checked) {
    darkMode.classList.add("dark-mode");
  } else {
    darkMode.classList.remove("dark-mode");
  }
}

.dark-mode {
  color: white;
  background-color: black;
}

<body>
  <div class="switch">
    <input type="checkbox" name="checkbox" id="checkbox" onchange="darkmode(this)" />
  </div>

  <section id="section">
    <p>This is a line</p>
  </section>
</body>

当取消选中复选框输入时，页面内容恢复正常（和以前一样）

Content of the page back to normal (as it was before) when the checkbox input is unchecked

html

javascript

css

checkbox

onchange