JavaScriptでのクラス名(class)の取得、追加、削除方法
今回は、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("クラス名");
上記のコードのように、ある要素に対し、既存のクラス名のうち、指定したクラス名のみを削除することができます。