我制作了一个按钮并添加了单击它的事件监听器。现在我为 JS 设置以下代码(按钮 id 是下一个):
next.addEventListener("click", () => {
if (AB.style.backgroundColor === "pink") {
AB.style.backgroundColor = "red";
} else if (AB.style.backgroundColor === "red") {
AB.style.backgroundColor = "orange";
}
});#AB {
background-color: pink;
}<div id="AB">Words</div>
<button id="next">Button</button>现在，当我第一次单击该按钮时，颜色确实从粉红色变为红色。但是，第二次单击(即 else if 部分)不会执行任何操作。如何在点击时切换颜色？
最佳答案
是的，按照 @ggorlen 的建议查看 getCompulatedStyle()。
但它会给你一个计算值，采用 rgb(,,,) 格式。
我建议改用类。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.pink {
background-color: pink;
}
.red {
background-color: red;
}
.orange {
background-color: orange;
}
</style>
</head>
<body>
<div id="AB" class="pink">Words</div>
<button id="next">Button</button>
</body>
<script>
next.addEventListener("click", () => {
const element = document.getElementById('AB');
if (element.classList.contains('pink')) {
element.classList.remove('pink');
element.classList.add('red');
} else if (element.classList.contains('red')) {
element.classList.remove('red');
element.classList.add('orange');
}
});
</script>
</html>
关于javascript - 面对让 JS 按钮工作的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70407111/