4

当我添加 .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 它将应用更改的“字体样式”和更改的“字体大小”，但颜色仍为红色。我希望它用新颜色替换红色

4

3 回答 3

4

这实际上是一种正确的行为。这都是关于 CSS 特异性的。选择器中包含的样式比选择器中包含的样式id具有更高的特异性class。我建议将第一个样式放在 a 中class，而不是将它们附加到id：

.altertext {
    color:#F00;
    font-weight:bold;
}

或者简单地定义类似的东西

#altertext .changedtext {
    color:#0F0;
    font-style:italic;
    font-size:24px;
}

使用第二种方法，您的特异性是 0110 (#altertext .changedtext)，高于 0100 (#altertext)。

于 2013-11-08T09:32:16.327 回答
2

随着className您将一个类应用于元素，因此您的该类的 CSS 声明应该适用。

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

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

于 2013-11-08T09:31:52.917 回答
0

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

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

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

于 2013-11-08T09:36:56.687 回答