classList.toggle()でクラスの有無を切り替える【JavaScript】

2019年7月4日

この記事では、classList.toggle()を使って、クラスの有無を切り替えます。

classListに関する他の記事は下記で紹介しています。

この記事の目次

classList.toggle()

element.classList.toggle('クラス名')と使います。

element（クラス名をチェックする対象）にクラス名があれば、クラス名を除去し、クラス名がなければ追加します。

「toggle実行」のボタンをクリックするとイベントが発火し、クラス名の有無をチェックします。

<div id="target">ターゲット</div>
<button onclick="actionToggle();">toggle実行</button>

function actionToggle() {
  var target = document.getElementById('target');
  target.classList.toggle('apple');
}

.apple {
  color: red;
}

「toggle実行」をクリックすると、HTMLは下記の2つで交互に切り替わります。

<!-- appleあり -->
<div id="target" class="apple">ターゲット</div>

<!-- appleなし -->
<div id="target" class="">ターゲット</div>

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。