我正在尝试切换同一个 div 的背景颜色。 它确实如预期的那样改变了一次(从蓝色到红色)。 但它无法切换回红色并继续在两种颜色之间切换。我知道我应该在第一个 if 语句中使用“==”,但是当使用“==”时,甚至第一个切换都不起作用。
有什么建议可以让开关重复工作吗?
function toggleFunction() {
var x = document.getElementById("box");
if (x.style.background == "blue") {
x.style.background = "red";
} else {
x.style.background = "blue";
}
}
.box {
background-color: blue;
width: 100px;
height: 100px;
margin: 30px 0px 0px 30px;
}
<div id="box" class="box" onclick="toggleFunction()"></div>
最佳答案
最简单的解决方案是创建一个名为 red
的新类,并使用 classList.toggle
切换它。这种方法的主要优点是你可以切换更多的 CSS
属性,如果你使用一个类来切换,这也会为你扣除 if-else
比较。
function toggleFunction() {
var x = document.getElementById("box");
x.classList.toggle("red");
}
.box {
background-color: blue;
width: 100px;
height: 100px;
margin: 30px 0px 0px 30px;
}
.red{
background-color: red;
}
<div id="box" class="box" onclick="toggleFunction()"></div>
关于javascript - 切换同一个 div 的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50037720/