JavaScriptは、要素クラス、追加/削除要素のクラスのメソッドを設定します

一実施形態では、el.setAttribute（ 'クラス'、 'A'）。

.A { 
    色：赤。
} 

#IDボックス

VARのボックス=のdocument.getElementById（ 'ボックス' ）; 
box.setAttribute（ 'クラス'、 ''）;

IE6 / 7：divの背景色は、Redされていません
IE8 / 9月10日/ Firefoxの/サファリ/クローム/オペラ：DIVの背景色は赤です

結果：IE6 / 7のsetAttribute（ 'クラス'、 'XXX'）に設けられた素子のクラスをサポートしていません。

 

第二の方法、el.setAttribute（ 'クラス名'、 ''）;

.A { 
    色：赤。
} 

#IDボックス

VARのボックス=のdocument.getElementById（ 'ボックス' ）; 
box.setAttribute（ 'クラス名'、 ''）。

IE6 / 7：DIVの背景色が赤である
IE8 / 9月10日/ Firefoxの/サファリ/クローム/オペラ：DIVの背景色は赤ではありません

結果：IE8 / 9月10日/ Firefoxの/サファリ/クローム/オペラのsetAttribute（ 'クラス名'、 'XXX'）に設けられた素子のクラスをサポートしていません。

注：上記の2つの方法が互換性の問題です

三つの方法、el.className = 'ABC';（良好な適合性）

.A { 
    色：赤。
} 
.B { 
    フォント - サイズ：18px; 
} 

#IDボックス

VARのボックス=のdocument.getElementById（ 'ボックス' ）; 
box.className = '' ; 
box.className + = 'B'; // 前加空格

結果：すべてのブラウザのサポート。

 

また、他の方法があります

使用el.classListの追加や削除クラス

{II.A 
    色：赤; 
} 
.B { 
    フォント - サイズ：18px; 
} 
.C { 
    背景：＃8A2BE2は; 
} 
ボックス#ID 

VARボックス=のdocument.getElementById（ 'ボックス' ）;
 // はconsole.log（ボックス。 CLASSLIST）; 
box.classList.add（ ''）;       // 追加 
box.classList.remove（ 'B'）を;    // 削除 
box.classList.toggle（ 'C'）// 対応するクラスが存在する場合、削除、なしで追加された
VAR = box.classList.contains IF_B（ ''）; // 検索がノークラス、falseに真/に戻り対応 
はconsole.log（IF_Bを）。