javascript - 如何使用javascript更改类名？

Question

代码

window.onload = function() {
  var refButton = document.getElementById("old");
  refButton.onmouseover = function() {
    refButton.className = 'newClass';
  }
};

.newClass {
  color: white;
}
#old {
  color: blue;
}

<div id="old">
  Hello
</div>

如果我输入 style.color="red" 而不是 ClassName，那么代码就可以工作。

请问是什么问题

Answer 1

是因为CSS specificity ，所以只需将 #old 添加到您的 .newClass

• .newClass 具有特殊性:0 0 1 0
• #old 具有特殊性:0 1 0 0

因此 #old 更具体。

使用 #old.newClass 你会得到 0 1 1 0 这将更具体并将应用你想要的新样式。

可以计算CSS特异性here

window.onload = function() {
  var refButton = document.getElementById("old");
  refButton.onmouseover = function() {
    refButton.className = 'newClass';
  }
};

#old.newClass {
  color: red;
  /* changed for demo */
}
#old {
  color: blue;
}

<div id="old">
  Hello
</div>