要素のクラスをトグルする

要素のクラスをトグルするには、要素の classList プロパティの toggle() メソッドを使用します。

element.classList.toggle(className);Code language: CSS (css)

要素に className がある場合、toggle() メソッドはそれを削除します。要素に className がない場合、toggle() メソッドは className を classList に追加します。

次の要素があるとします。

<div class="show">Item</div>Code language: HTML, XML (xml)

以下は、<div> 要素の show クラスをトグルする方法を示しています。

const div = document.querySelector('div');
div.classList.toggle('show');Code language: JavaScript (javascript)