Question

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

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

我在做什么错？

谢谢！

Answer 1

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

ifstream& QFileToifstream(QFile & file) {
    Q_ASSERT(file.isReadable());
    return ifstream(::_fdopen(file.handle(), "r")); //error: non-const lvalue reference to type 'basic_ifstream<...>' cannot bind to a temporary of type 'basic_ifstream<...>'
}

const checkBox = document.getElementById('y');
checkBox.addEventListener("change", updateBackground);
updateBackground();

function updateBackground() {
  document.body.style.backgroundColor = checkBox.checked ? "red" : "blue";
}

您也可以只选择一个类，然后更改或删除该类的名称。

<input id="y" type="checkbox" />

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;
}

使用JavaScript选中复选框时更改样式

1 个答案: