【JavaScript】クラス操作まとめ（追加、削除、トグル、置換など）

JavaScriptで指定した要素のclassを追加・削除・切り替え・置換・判定・取得（数・値）をする方法をサンプルとともに紹介します。JavaScriptのclassList の add やremoveやtoggleやreplaceやcontainsやlengthやvalueで実現できます。 複数のクラスを一括で追加・削除・切り替えする方法にも触れています。jQueryで操作する方法については、「【jQuery】クラス操作まとめ（追加、削除、トグル、置換など）」をご覧ください。

JavaScriptでクラスを追加する

JavaScriptでクラスを追加するにはclassListのaddメソッドを使います。Element.classList.add("className");で実行できます。

elm.classList.add("className");

JavaScriptで複数のクラスを追加する

Element.classList.add("classA", "classB");のように引数にカンマ区切りで指定することで、複数のクラスを同時に追加することができます。

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

JavaScriptでクラスを削除する

JavaScriptでクラスを削除するにはclassListのremoveメソッドを使います。

elm.classList.remove("className");

JavaScriptで複数のクラスを削除する

Element.classList.remove("classA", "classB");のように引数にカンマ区切りで指定することで、複数のクラスを同時に削除することができます。

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

JavaScriptでクラスを切り替える（トグルする）

JavaScriptでクラスを切り替える（あれば削除、なければ追加する）にはclassListのtoggleメソッドを使います。

elm.classList.toggle("className");

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

JavaScriptでは直接複数クラスをまとめて切り替える方法はないため、ループ処理などを加えて独自に実装する必要があります。

JavaScriptでクラスを置き換える（置換する）

JavaScriptでクラスを置き換えるにはclassListのreplaceメソッドを使います。

以下は、classAからclassBに置き換える例です。

elm.classList.replace("classA", "classB");

JavaScriptでクラスが含まれているかを判定する

javascriptでクラスが含まれているかを判定するにはclassListのcontainsメソッドを使います。

elm.classList.contains("className");

JavaScriptでクラスの数を取得する

javascriptでクラスの数を取得するにはclassListのlengthプロパティを使います。

elm.classList.length

JavaScriptでクラス属性に指定されている文字列を取得する

javascriptでクラス属性に指定されている文字列を取得するにはclassListのvalueプロパティを使います。

elm.classList.value