第二次单击时如何更改元素颜色？

Question

我正在为我正在制作的网站制作一个类似的按钮，我有一个简单的 JavaScript 可以在单击时将颜色更改为红色，但是我怎样才能使颜色交替，所以如果你再次单击它它会去如果您再次单击它等，则返回黑色而不是再次变为红色。

 const btn = document.getElementById("like"); btn.addEventListener('click', function onClick() { btn.style.color = 'crimson'; });

Answer 1

使用classList的toggle方法。

而且，作为一般规则，您应该努力避免设置“内联样式”（ element.style.xxx = xxx ），因为这会为元素创建一个只能被另一个内联样式覆盖的样式，从而导致代码重复，因此无法很好地扩展代码。 相反，请始终尝试使用 CSS 类。

 document.getElementById("like").addEventListener('click', function() { this.classList.toggle("active"); });

 .active { color:crimson; }

 <button id="like">Like</button>

Answer 2

你可以按照这个步骤

首先让我们取一个计数器变量

let clickCount = 0;

然后添加点击事件。野兔是你的代码：

 const btn = document.getElementById("like"); let clickCount = 0; btn.addEventListener("click", () => { clickCount++; if (clickCount > 1) { btn.style.color = "red"; } });

 <button id="like">Like</button>