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

classList オブジェクトの toggle メソッドは、 要素の指定されたCSSクラスを切り替えます：クラスがなければ追加し、 あれば削除します。

構文

javascriptelement.classList.contains(class);

例

この例では、toggle メソッドを使用すると、 クラス zzz は要素に既に存在するため削除されます：

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

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

コード実行結果：

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

例

この例では、toggle メソッドを使用すると、 クラス zzz は要素に存在しないため追加されます：

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

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

コード実行結果：

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

関連項目