单击时更改文本颜色

时间:2016-07-24 03:27:00

标签: javascript text colors

我点击时尝试将文字从黑色更改为蓝色。我把它作为"如果"声明,我知道它不需要成为" 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;
}

<div class="mydiv" id="thisdiv">Click Me</div>
&#13;
&#13;
&#13;

JSFiddle

我并不是真的想找到一个让它从黑色变为蓝色的解决方案,因为我确定还有其他方法可以做到这一点,但更多的只是想知道为什么我没有办法。

3 个答案:

答案 0 :(得分:3)

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

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

&#13;
&#13;
var myvar = document.getElementById('thisdiv');

myvar.onclick = function myfunction() {
  if (window.getComputedStyle(myvar).color === "rgb(0, 0, 0)") {
    myvar.style.color = "#0000FF";
  }
}
&#13;
.mydiv {
  height: 200px;
  width: 200px;
  background-color: red;
  color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
&#13;
<div class="mydiv" id="thisdiv">Click Me</div>
&#13;
&#13;
&#13;

更好的策略是向元素添加或删除CSS类,以便从功能中获得单独的表示。

答案 1 :(得分:0)

好的,因此代码无效的原因是因为myvar.style.colorundefined。使用样式表时,它不会影响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";
}

答案 2 :(得分:0)

我强烈建议为此使用额外的类,以说明其状态。

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;
}