单击时更改文本颜色答案

【问题标题】：Changing Text Color On Click单击时更改文本颜色
【发布时间】：2016-07-24 03:27:00
【问题描述】：

我试图在单击时将文本从黑色更改为蓝色。我将它作为“if”语句，我知道它不需要是“if”语句，但我只是想知道为什么它不起作用。我只是问，“如果这个颜色是黑色的，就把它改成蓝色。”

var myvar = document.getElementById('thisdiv');

myvar.onclick = function myfunction() {
  if (myvar.style.color == "#000000") {
    myvar.style.color = "#0000FF";
  }
}

.mydiv {
  height: 200px;
  width: 200px;
  background-color: red;
  color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

&lt;div class="mydiv" id="thisdiv"&gt;Click Me&lt;/div&gt;

JSFiddle

我并不是真的在寻找一种解决方案来让它从黑色变为蓝色，因为我确信我可以找到其他方法来做到这一点，但更多的是想知道为什么我拥有它的方式不起作用.

【问题讨论】：

标签： javascript text colors

【解决方案1】：

style 仅保存使用 HTML 中的 style 属性添加的样式。它不包含通过应用<style> 标签或样式表计算出的样式。

要获得计算的样式，请使用window.getComputedStyle()。请注意，这是只读的。

var myvar = document.getElementById('thisdiv');

myvar.onclick = function myfunction() {
  if (window.getComputedStyle(myvar).color === "rgb(0, 0, 0)") {
    myvar.style.color = "#0000FF";
  }
}

.mydiv {
  height: 200px;
  width: 200px;
  background-color: red;
  color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

&lt;div class="mydiv" id="thisdiv"&gt;Click Me&lt;/div&gt;

不过，更好的策略是向元素添加或删除 CSS 类，以便您获得与功能分开的展示。

【讨论】：

如果颜色是在文档的 html 头部的样式标签中设置的，而不是在链接的 CSS 页面中，那么“if”是否会像我拥有的那样返回真实？
没有。它只查看 HTML 元素的 style 属性。更好的做法是创建一个 CSS 类，然后添加或删除该类以更改样式。
没关系，我更清楚地阅读了您的解释....非常感谢您的帮助！
@JonathanFoster 太棒了！仅供参考，当一个答案解决了一个问题时，提问者点击答案旁边的复选标记是正常的。
谢谢！！！！我选中了复选框，也感谢其他所有人，这个网站很棒。

【解决方案2】：

好的，所以代码不工作的原因是因为myvar.style.color 是undefined。当您使用样式表时，它不会影响 JavaScript style 属性，这应该与元素的 style 属性中定义的样式相同。您想要的是如下所示。

// undefined!="#0000ff", success
if(myvar.style.color!="#0000ff") {
    myvar.style.color = "#0000ff";
}

如果你想使用 JQuery，你可以试试下面的方法。

// JQuery always returns opaque colors in rgb(r, g, b) form
// regardless of the original format.
if($(myvar).css("color")=="rgb(0, 0, 0)") {
    myvar.style.color = "#0000ff";
}

【讨论】：

【解决方案3】：

我强烈建议为此使用一个额外的类来说明它的状态。

var myvar = document.getElementById('thisdiv');

myvar.onclick = function myfunction() {
    /* if (myvar.className === ""){
        myval.className = "active";
    } else {
        myvar.className = "";
    } */
    // Same as below, toggle the class of #thisdiv from active to blank
    myvar.className = myvar.className === "" ? "active" : "";
}



.mydiv {
  height: 200px;
  width: 200px;
  background-color: red;
  color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.mydiv.active{
  color: #0000ff;
}

您也可以使用 :visited 伪选择器并完全摆脱 click 功能。不过，您需要使您的 div 成为一个大链接。像这样的东西；

<a class="mydiv" id="thisdiv">Click Me</a>

.mydiv{
  display:block; /* since it's a link and will be inline by default */
}
.mydiv:visited{
  color: #0000ff;
}

【讨论】：