Question

我点击时尝试将文字从黑色更改为蓝色。我把它作为＆＃34;如果＆＃34;声明，我知道它不需要成为＆＃34; if＆＃34;声明，但我只是想知道为什么它不起作用。我只是问，＆＃34;如果这种颜色是黑色，请将其改为蓝色。＆＃34;

＆＃13;

var myvar = document.getElementById('thisdiv');

myvar.onclick = function myfunction() {
  if (myvar.style.color == "#000000") {
    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;

JSFiddle

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

Answer 1

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

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

＆＃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;

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

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

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

单击时更改文本颜色

3 个答案: