Question

代码

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果代替ClassName我输入style.color="red"，则代码可以正常工作。

我想知道问题是什么。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果您尝试使用鼠标悬停效果，可以通过替换“newClass＆＃39;与

#old:hover{color:white;}

jsfiddle demo here

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

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

的优先级高于

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

这就是为什么作业不起作用

如何使用javascript更改className？

2 个答案: