JavaScript
JavaScriptの classList で、HTML要素のclassを追加・削除・切り替えする基本を説明します。
この記事でわかること
add()・remove()・toggle()の使い分けcontains()でクラスの有無を確認する方法- 状態の見た目を切り替え、意味や操作性も保つ考え方
classList
classListプロパティは、要素のクラス属性のリストを取得して返します。classListプロパティは、element.className経由で空白区切りのクラス名の文字列を取得する代替手段として、要素のクラス名のリストにアクセスするのに便利です。これは下記のメソッドを含みます。
- add
- 要素のクラスのリストに、クラスを追加します。
- remove
- 要素のクラスのリストから、クラスを削除します。
- toggle
- 要素のクラスのリスト内のクラスの有無を切り替えます。
- contains
- 指定したクラスが、要素のクラスのリストに含まれているかを確認します。
Syntax (構文)
var elementClasses = elementNodeReference.classList;
elementClassesには、elementNodeReferenceのクラス属性を表す DOMTokenListが格納されます。もしクラス属性が設定されていない、または空の場合、elementClasses.lengthは 0 を返します。element.classListそれ自身は読み取り専用ですが、add()と remove()メソッドを使用して、変更することが可能です。
toggle()メソッドは真偽値によって、強制的にクラス名を追加または削除する任意の２つ目の引数を持ちます。例えば、クラスを削除（存在するしないに関わらず）するために、element
Sample
JavaScript source
// 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
