Question

当我添加.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它将应用更改的'font-style'并更改'font-size'但颜色仍然是红色。我希望它用新颜色替换红色

Answer 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）。

Answer 2

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

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

如果要使用类覆盖规则，则应使用其他类（而非ID）设置它们。

Answer 3

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

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

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

javascript .className不替换以前的样式

3 个答案: