单击时更改颜色

Question

我正在尝试使用.style.color更改元素的颜色，但进展不是很顺利。我的目标是让它在点击时改变红色，然后变成蓝色。有什么建议吗？

var turns = 0;
function dot_01() {
if (turns === 0) {
turns++;
document.getElementById("dot_01").style.color = 'red';
} else if (turns === 1) {
turns--;
document.getElementById("dot_01").style.color = 'blue';
}
}
<div class="dot" id="dot_01" onclick="dot_01()"></div>

Answer 1

您希望使用.style.backgroundColor来更改按钮颜色。.color将更改字体颜色。

<input type="button" value="Click Me" onclick="this.style.backgroundColor = '#000'; this.style.color = '#FFF';" />

Answer 2

如果您想更改背景颜色，请尝试style.backgroundColor如下方式：

document.getElementById("dot_01").style.backgroundColor = 'red';
function dot_01(el) {
if (el.style.backgroundColor === 'red') {
el.style.backgroundColor = 'blue';   
}
else el.style.backgroundColor = 'red';
}

<div class="dot" id="dot_01" onclick="dot_01(this)">Container</div>

Answer 3

我用它来更改样式，这是一个非常简单的JavaScript，可以更改CSS的显示和高度属性以显示/隐藏容器。 抱歉，我还没有将其更改为您想要的结果，但我希望这有所帮助，只需通过执行以下操作来修改它以更改颜色：

样式="颜色：红色">

https://jsfiddle.net/raydekker/u821a84d/

style="color:red";