javascript - 单击时更改文本颜色

Question

我试图在单击时将文本从黑色更改为蓝色。我将其作为“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;
}

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

JSFiddle

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

Answer 1

style仅保存使用 style 添加的样式HTML 中的属性。它不包含应用<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;
}

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

更好的策略是向元素添加或删除 CSS 类，以便您获得与功能分离的呈现。