classListオブジェクトのaddメソッド

classListオブジェクトの addメソッドは、要素にCSSクラスを追加することができます。

構文

javascriptelement.classList.add(class);

例

要素にクラスkkkを追加します：

html<p id="elem" class="www ggg zzz"></p>

javascriptlet elem = document.querySelector('#elem');
elem.classList.add('kkk');

コード実行結果：

html<p id="elem" class="www ggg zzz kkk"></p>

例

要素に既に存在するクラスzzzを追加します - クラスの重複は追加されないため、何も起こりません：

html<p id="elem" class="www ggg zzz"></p>

javascriptlet elem = document.querySelector('#elem');
elem.classList.add('zzz');

コード実行結果：

html<p id="elem" class="www ggg zzz"></p>

関連項目