【javascript】複数クラスの追加・削除・切り替えをclassListのaddとremoveとtoggleで実現する

javascript

javascript(vanilla JS)のclassListのaddとremoveとtoggleで複数のクラス(class)をまとめて追加・削除・切り替えをする方法を紹介します。 複数のクラスをまとめて制御するにはclassList の addremovetoggleで実現することができます。jQueryのコードも合わせて紹介しています。

複数のクラスを追加する

カンマ区切りで入力していくことで複数のクラスを同時に追加することができます。

elm.classList.add("first-class", "second-class", "third-class");

jQueryにおける以下のコードと対応しています。

$elm.addClass("first-class second-class third-class");

複数のクラスを削除する

カンマ区切りで入力していくことで複数のクラスを同時に削除することができます。

elm.classList.remove("first-class", "second-class", "third-class");

jQueryにおける以下のコードと対応しています。

$elm.removeClass("first-class second-class third-class");

複数のクラスを切り替える

カンマ区切りで入力していくことで複数のクラスを同時に切り替えすることができます。

elm.classList.toggle("first-class", "second-class", "third-class");

jQueryにおける以下のコードと対応しています。

$elm.toggleClass("first-class second-class third-class");

コメントを残す

メールアドレスが公開されることはありません。