JavaScriptでのクラス名(class)の取得、追加、削除方法

PROGRAM

今回は、JavaScriptでのクラス名(class)の取得、追加、削除方法について、それぞれに分け、簡単に解説していきます。

クラス名(class)の取得

クラス名は要素のclassNameプロパティで取得できます。

複数のクラス名を配列で取得するにはclassListプロパティを参照します。

var className = element.className;
var classNames = element.classList;

上記のコードは、文字列と配列、それぞれの型でクラス名を取得するコードになります。

クラス名(class)の追加

クラス名を追加するには、要素のDOMTokenListのaddメソッドを使います。

要素のDOMTokenListのaddメソッドでは、引数に追加するクラス名を指定します。

element.classList.add("クラス名");

上記のコードのように、ある要素に対し、既存のクラス名を保持しながら新しいクラス名を追加できます。

クラス名(class)の削除

クラス名を削除するには、要素のDOMTokenListのremoveメソッドを使います。

要素のDOMTokenListのremoveメソッドでは、引数に削除するクラス名を指定します。

element.classList.remove("クラス名");

上記のコードのように、ある要素に対し、既存のクラス名のうち、指定したクラス名のみを削除することができます。