JavaScript

JavaScript classList property.

classList

　classListプロパティは、要素のクラス属性のリストを取得して返します。classListプロパティは、element.className経由で空白区切りのクラス名の文字列を取得する代替手段として、要素のクラス名のリストにアクセスするのに便利です。これは下記のメソッドを含みます。

add

要素のクラスのリストに、クラスを追加します。

remove

要素のクラスのリストから、クラスを削除します。

toggle

要素のクラスのリスト内のクラスの有無を切り替えます。

contains

指定したクラスが、要素のクラスのリストに含まれているかを確認します。

var elementClasses = elementNodeReference.classList;

　elementClassesには、elementNodeReferenceのクラス属性を表す DOMTokenListが格納されます。もしクラス属性が設定されていない、または空の場合、elementClasses.lengthは 0 を返します。element.classListそれ自身は読み取り専用ですが、add()と remove()メソッドを使用して、変更することが可能です。

　toggle()メソッドは真偽値によって、強制的にクラス名を追加または削除する任意の２つ目の引数を持ちます。例えば、クラスを削除（存在するしないに関わらず）するために、element.classList.toggle('classToBeRemoved',false);を呼び出し、クラスを追加（存在するしないに関わらず）するために、element.classList.toggle('classToBeAdded',true);を呼び出します。

Sample

// divはclass="foo bar"を持つ<div>要素オブジェクトへの参照です。
div.classList.remove("foo");
div.classList.add("anotherclass");

// もしvisibleがあれば削除され、そうでなければ追加されます。
div.classList.toggle("visible");
alert(div.classList.contains("foo"));
div.classList.add("foo","bar"); //複数のクラスを追加

Browser compatibility