javascript .className 不替换以前的样式答案

【问题标题】：javascript .className not replacing previous stylejavascript .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 是原始样式，类是我要应用的类。因此，onclick 它将应用更改后的“字体样式”和更改的“字体大小”，但颜色仍为红色。我希望它用新颜色替换红色

【问题讨论】：

标签： javascript html css

【解决方案1】：

这实际上是一种正确的行为。这都是关于 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)。

【讨论】：

【解决方案2】：

使用className，您正在对元素应用一个类，因此应该应用该类的 CSS 声明。

但您并没有删除使用 ID 选择器#altertext 应用的规则。这些将覆盖任何冲突的类规则，因为 ID 是比类更具体的选择器。

如果你想用一个类覆盖规则，你应该使用一个不同的类来设置它们，而不是一个 ID。

【讨论】：

【解决方案3】：

另一种解决方案是修改mainfunc 并更改颜色，但@Krasimir 的答案当然是正确的解决方案。

var mainfunc = function(){
    loadtext.className = "changedtext";
    loadtext.style.color = "#0F0"; 
}

小提琴：http://jsfiddle.net/qzLa3/1/

【讨论】：