我正在尝试获得一个按钮来在两种颜色之间更改HTML正文的颜色。
这是我尝试的相关JS
document
.getElementsByTagName("button")[0]
.addEventListener("click", function() {
if ((document.getElementsByTagName("body")[0].style.background = "white" )) {
document.getElementsByTagName("body")[0].style.background = "blue";
}
if ((document.getElementsByTagName("body")[0].style.background = "blue")) {
document.getElementsByTagName("body")[0].style.background = "white";
}
});
正如你所看到的，我试图在点击按钮时在白色和蓝色之间切换背景色，但什么也没发生。
你能帮我澄清一下我做错了什么吗？
使用双等于而不是单等于。Single只需将值指定给左侧。只需将==添加到if条件中即可。还添加了一个else if条件，以在按钮点击时的颜色之间切换，如下所示：
document
.getElementsByTagName("button")[0]
.addEventListener("click", function() {
if ((document.getElementsByTagName("body")[0].style.background == "white" )) {
document.getElementsByTagName("body")[0].style.background = "blue";
}
else if ((document.getElementsByTagName("body")[0].style.background == "blue")) {
document.getElementsByTagName("body")[0].style.background = "white";
}
});
另外，你必须给身体一种颜色，因为默认情况下身体是透明的。
完整代码：
document
.getElementsByTagName("button")[0]
.addEventListener("click", function() {
if ((document.getElementsByTagName("body")[0].style.background == "white" )) {
document.getElementsByTagName("body")[0].style.background = "blue";
}
else if ((document.getElementsByTagName("body")[0].style.background == "blue")) {
document.getElementsByTagName("body")[0].style.background = "white";
}
});<!DOCTYPE html>
<html>
<body style="background:white">
<button>Click me</button>
</body>
</html>