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