classList.toggle()

クラスリスト・トグル（DOM操作）

意味クラスを切り替え

classList.toggle()とは？

指定したクラス値が要素に存在する場合は削除し、存在しない場合は追加します。

classList.toggle()の具体的な使い方

クラスを切り替える例

<button onclick='toggleActiveClass()'>クラスを切り替え</button>
<div id='myElement' class='my-element'>この要素のクラスを切り替えます</div>

<script>
function toggleActiveClass() {
  const element = document.getElementById('myElement');
  const isActive = element.classList.toggle('active');
  if (isActive) {
    element.textContent = 'activeクラスが追加されました';
    element.style.backgroundColor = 'yellow';
  } else {
    element.textContent = 'activeクラスが削除されました';
    element.style.backgroundColor = '';
  }
}
</script>

ボタンをクリックするたびに、'myElement'の'active'クラスを追加または削除します。クラスの状態に応じて、要素のテキストと背景色が変更されます。

classList.toggle()に関するよくある質問

Q. classList.toggle()の戻り値は？

A. classList.toggle()は、クラスが追加された場合はtrue、削除された場合はfalseを返します。

Q. 複数のクラスを一度に切り替えられる？

A. いいえ、classList.toggle()は一度に1つのクラスのみ操作します。複数のクラスを切り替えるには、メソッドを複数回呼び出す必要があります。

Q. IE11でclassList.toggle()は使える？

A. はい、IE10以降でサポートされています。ただし、第2引数（強制的に追加/削除を指定する）の機能はIE11以降でサポートされています。

classList.toggle()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのclassList.toggle()やtextContent、setAttribute()、removeChild()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。