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

Question

我正在尝试创建一个带有复选框的暗模式切换按钮(我最终将更改为 CSS 中的切换按钮)。到目前为止，我能够将我的 Javascript Canvas 中的元素更改为“暗模式”并轻松更改它们的颜色，但是有没有一种方法可以在 Javascript 中使用相同的开关/复选框来切换 CSS 部分？我不想创建另一个复选框来更改 HTML 的背景颜色。我尝试了下面的方法没有结果。我希望复选框基本上将网页的背景变为黑色，如果未选中则返回白色。我的完整代码在 CodePen 上 https://codepen.io/Fragile404/pen/VxZVxm

body {
background-color: white;
}
body.checkbox: checked; 
{
background-color: black;
}

Answer 1

您需要为此使用 JavaScript。将您的最终 if 更改为:

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 至少会慢十倍。