所以我想在选中复选框输入时更改页面的一些内容，并在取消选中复选框时将所有内容恢复到以前的状态。
<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"语句中，我必须为每一个内容提供"以前的值"。这样做需要花费大量时间，而且我必须将所有内容都写两次(用CSS和Javascript(。
如果有一种方法可以在取消选中复选框时将所有内容设置为默认值，而不给每个元素提供其先前的值。请告诉我。
谢谢
我认为最简单明了的解决方案是设计链接到body css类的暗模式样式，并直接使用onchange事件切换该类。
我希望这个解决方案能帮助你。
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>最简单的解决方案是在主体中添加和删除一个类，如下片段所示。然后在css中为darkmode创建所有样式。重要的是，它写在普通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>