单击更改颜色答案

【问题标题】：Change Color onClick单击更改颜色
【发布时间】：2018-10-25 21:20:43
【问题描述】：

我正在尝试使用.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>

【问题讨论】：

顺利对您意味着什么？
它不工作
Change Button color onClick的可能重复
鉴于 answer 完美地解决了 OP 的问题，将其标记为标题的第一个搜索结果的欺骗。

标签： javascript colors styles

【解决方案1】：

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

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

【讨论】：

问题，有什么办法可以缩短它而不是说document.getElementbyId，我知道你可以使用变量，请演示一下。
是的。您可以将元素放入变量中。 let elm = document.querySelector("#testitem"); 然后您可以与变量 elm 进行交互，就好像它是元素一样。 elm.style.backgroundColor = '#ACD';
似乎不起作用；/ let d1 = document.querySelector("dot_01"); d1.style.backgroundColor = '#e22b2b';
你写的东西对我来说很完美。我会检查两件事。可能您的浏览器不支持使用let。在这种情况下，您可以将其更改为var，它应该可以工作。如果它不起作用，请确保您正在运行的页面上肯定存在 ID 为“d1”的元素。

【解决方案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';
}

&lt;div class="dot" id="dot_01" onclick="dot_01(this)"&gt;Container&lt;/div&gt;

【讨论】：

【解决方案3】：

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

style="color:red"

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

style="color:red";

【讨论】：