{ if (AB.st-6ren">
gpt4 book ai didi

javascript - 面对让 JS 按钮工作的问题

转载 作者:行者123 更新时间:2023-12-02 01:50:11 25 4
gpt4 key购买 nike

我制作了一个按钮并添加了单击它的事件监听器。现在我为 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com