JavaScript

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

この記事では、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制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript
-

© 2020 ウェブつく Powered by AFFINGER5