如何使用javascript更改className？

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> 

如果我不是输入ClassName而是输入style.color="red"那么代码将起作用。

我想知道是什么问题。

Answer 1

这是因为CSS的特殊性 ，所以只需在#old中添加.newClass

• .newClass的特异性为： 0 0 1 0
• #old的特异性为： 0 1 0 0

因此#old更具体。

使用#old.newClass您将获得0 1 1 0 ，它将更加具体，并将应用您想要的新样式。

您可以在此处计算CSS特异性

 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> 

Answer 2

如果您尝试使用鼠标悬停效果，则可以通过将'newClass'替换为

#old:hover{color:white;}

jsfiddle演示在这里

就像adeneo的评论链接说的那样，

#old{color:blue;} //id selector

优先级高于

.newClass{color:white;} //class selector

这就是为什么作业不起作用的原因