javascript .className不会替换以前的样式
提问于 2013-11-08 09:27:04
当我添加.className来改变某些东西的样式时，不管有没有事件，它都不会替换以前的样式，比如颜色，它会添加新的样式属性，但不会用新的替换旧的样式属性。
var loadbutton = document.getElementById('initialbutton');
var loadtext = document.getElementById('altertext');
var mainfunc = function(){
loadtext.className = "changedtext";
}
loadbutton.addEventListener("click",mainfunc,false)
#altertext {
color:#F00;
font-weight:bold;
}
.changedtext {
color:#0F0;
font-style:italic;
font-size:24px;
}第一个ID是原始样式，类是我要应用的类。因此，单击它将应用更改后的'font-style‘和更改后的'font-size’，但颜色仍为红色。我想把红色换成新颜色。
回答 3
Stack Overflow用户
发布于 2013-11-08 09:32:16
这实际上是一种正确的行为。这一切都与CSS的专用性有关。包含id的选择器中的样式比包含class的选择器中的样式具有更高的特异性。我建议将第一个样式放在class中，而不是将它们附加到id中
.altertext {
color:#F00;
font-weight:bold;
}或者简单地定义像这样的东西
#altertext .changedtext {
color:#0F0;
font-style:italic;
font-size:24px;
}使用第二种方法，您的特异性为0110 (#altertext .changedtext)，高于0100 (#altertext)。
Stack Overflow用户
发布于 2013-11-08 09:31:53
使用className，您将一个类应用于元素，因此您对该类的CSS声明应该适用。
但是您不能删除使用ID选择器#应用的规则。这些将覆盖任何冲突的类规则，因为ID是一个比类更具体的选择器。
如果要用类覆盖规则，则应使用不同的类来设置它们，而不是使用ID。
Stack Overflow用户
发布于 2013-11-08 09:36:57
另一种解决方案是修改mainfunc并更改颜色，但@Krasimir答案当然是正确的解决方案。
var mainfunc = function(){
loadtext.className = "changedtext";
loadtext.style.color = "#0F0";
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19855521
复制相关文章
点击加载更多
腾讯云开发者
