classListオブジェクトのaddメソッド
classListオブジェクトの
addメソッドは、要素にCSSクラスを追加することができます。
構文
element.classList.add(class);
例
要素にクラスkkkを追加します：
<p id="elem" class="www ggg zzz"></p>
let elem = document.querySelector('#elem');
elem.classList.add('kkk');
コード実行結果：
<p id="elem" class="www ggg zzz kkk"></p>
例
要素に既に存在するクラスzzzを追加します - クラスの重複は追加されないため、何も起こりません：
<p id="elem" class="www ggg zzz"></p>
let elem = document.querySelector('#elem');
elem.classList.add('zzz');
コード実行結果：
<p id="elem" class="www ggg zzz"></p>
関連項目
-
指定したクラスを削除するメソッド
classList.remove -
指定したクラスを確認するメソッド
classList.contains -
指定したクラスを切り替えるメソッド
classList.toggle
