使用 JavaScript 检查复选框时更改样式答案

【问题标题】：Change styles when checking checkbox with JavaScript使用 JavaScript 检查复选框时更改样式
【发布时间】：2019-02-26 02:25:03
【问题描述】：

我正在尝试（没有成功）创建一个复选框，该复选框在选中时会更改正文的某些样式属性，如下所示：

<script>
  const x = document.getElementById('y');
  if (x.checked == true) { 
    document.body.style.setProperty('property', 'value');
  } else {
    document.body.style.setProperty('property', 'value');
  }
</script>

我做错了什么？ ????

提前致谢！

【问题讨论】：

或许可以考虑走纯 CSS 路线：stackoverflow.com/q/44804022/691711
@zero298 Lewis 想要更改 body 元素的样式，而不是复选框本身。
电脑不会思考。他们一个接一个地做。如果您执行if(...)，您告诉计算机检查x 的checked 值，完成后他将继续执行其他操作。他不会再检查（如果你没有告诉他这样做）
@sean 您仍然可以通过更改 body 的类来更改其样式
那么你的问题解决了吗？

标签： javascript

【解决方案1】：

您需要使用事件侦听器并在侦听器中运行该脚本。您在代码中所做的是在脚本运行时设置一次颜色，您没有告诉程序每次更改复选框时都要检查。

const checkBox = document.getElementById('y');
checkBox.addEventListener("change", updateBackground);
updateBackground();

function updateBackground() {
  document.body.style.backgroundColor = checkBox.checked ? "red" : "blue";
}

&lt;input id="y" type="checkbox" /&gt;

您也可以只使用一个类，然后更改或删除类名。

const checkBox = document.getElementById('y');
checkBox.addEventListener("change", updateBackground);
updateBackground();

function updateBackground() {
  document.body.className = checkBox.checked ? "" : "blue";
}

body {
  background-color: red;
}

body.blue {
  background-color: blue;
}

&lt;input id="y" type="checkbox" /&gt;

【讨论】：

刚刚在空白页上测试过，它完美无瑕。问题出在我的项目结构中，将检查它。谢谢！
你需要检查两件事。 1.你得到的身份证是正确的。 2. 该元素在您尝试获取它时存在。有两种方法可以在末尾添加脚本标签。将async 属性添加到您的script 标记。使用setTimeout 并在几毫秒后获取元素。使用DOMContentLoaded 事件呈现所有内容后运行脚本