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 は元のスタイルで、クラスは適用したいクラスです。したがって、クリックすると、変更された「font-style」と変更された「font-size」が適用されますが、色は赤のままです。赤を新しい色に置き換えたい

4

3 に答える 3

4

それは実際には正しい行動です。それはすべてCSSの特異性に関するものです。を含むセレクターのスタイルは、 を含むセレクターのスタイルidよりも特異性が高くなりますclass。最初のスタイルを に配置するのclassではなく、に配置することをお勧めしidます。

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

または、単にそのようなものを定義します

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

2 番目のアプローチを使用すると、具体性は 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 に答える