Html 如何创建复选框来更改文档的CSS和Javascript？背景色切换

我正在尝试创建一个带有复选框的暗模式切换按钮（我最终将更改为CSS中的切换）。到目前为止，我能够将Javascript画布中的元素更改为“暗模式”，并轻松更改它们的颜色，但是有没有办法在Javascript中使用相同的开关/复选框来切换CSS部分？我不想创建另一个复选框来更改HTML的背景色。我尝试了下面的方法，但没有结果。我希望复选框基本上把网页的背景变成黑色，如果不选中，返回到白色。我的完整代码在代码笔上

---

为此，您需要使用JavaScript。将您的期末成绩更改为：

if(darkMode.checked) {
  toggleColor = (0,0,0);
  document.body.style.backgroundColor=  'black';
} else {
  toggleColor = (255,255,255);
  document.body.style.backgroundColor = 'white';
}

为什么？CSS只向前和向下解析。这意味着您可以使用父条件来设置子项的样式，也可以使用前一个兄弟项的条件来设置后一个兄弟项的样式，但不能反过来设置

---

围绕这一主题进行了许多讨论，并试图改变现状，但实际上，如果CSS也向后解析，web的速度至少会慢十倍。

您还可以在body元素上设置一个类，并让CSS类在该类存在时更改背景色。@Anthony，您是对的。你可以把它复杂化，以证明任何预算都是合理的。您可以使用SSH为它构建一个API服务，这也证明了后端接口可以管理它，我个人也会安装Swagger，并将其托管在AWS云服务上。但是，在接近结尾的某个地方，您需要以某种方式修改

document.body

元素的

style.backgroundColor

属性：在样式表中使用CSS规则、

style

属性或

style

标记，或者使用vanilla js（如我所做的）或jQuery或Angular。为了完成任务，我的意思是，没必要生气。说清楚点，你是对的。我只是在添加额外的信息。如果使用类来实现，就可以避免javascript中的神奇字符串。如果您不想在样式表中这样做，那很好。撇开玩笑不谈，在这种情况下，在本例中向主体添加类是没有意义的，IMHO。您将编写更多的代码，并且维护我提出的内容将更加困难。您希望使用类（或其他CSS选择器）的唯一原因是，不要通过使用

样式

属性锤来损害一些微妙的CSS选择器复杂性（使用类-和CSS-还改变

主体

的

背景色

）。但是，由于我们没有这样的解决方案，我的解决方案是直截了当的，并利用已经开发的技术，使用“首选”技术。因此，只需很少的努力就可以完成工作。你是对的，在这种情况下没有必要这样做。我假设会增加更多的复杂性，这在问题中并不存在。我仍然认为这可能是一个有用的注释。所以，是的，不要给一个元素添加样式表。

if(darkMode.checked) {
  toggleColor = (0,0,0);
  document.body.style.backgroundColor=  'black';
} else {
  toggleColor = (255,255,255);
  document.body.style.backgroundColor = 'white';
}