English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
classList読み取り専用の属性は、要素のクラス属性のリアルタイムDOMTokenListコレクションを返します。
classList属性は、要素にクラスを追加、削除、切り替えるのに非常に役立ちます。
この属性は読み取り専用ですが、add()とremove()メソッドを使用して変更できます。
classListを使用することは、以下のように簡単な代替方法です。classNameスペースで区切られた文字列を使用して要素のクラスリストにアクセスします。
element.classList
var elem = document.getElementById("x");
elem.classList.add("para");テストを見て‹/›この属性が完全にサポートされる最初のブラウザバージョンは、テーブル内の数字で指定されています：
| 属性 | |||||
| classList | 8 | 3.6 | は | 5.1 | 10 |
| 属性 | 説明 |
|---|---|
| length | リスト内のクラス数を返します |
| メソッド | 説明 |
|---|---|
| add(class1, class2, ...) | 1つまたは複数のクラス名を要素に追加します。 要素のclass属性に既に指定されたクラスが存在する場合、そのクラスは追加されません。 |
| contains(class) | 指定されたクラス値が要素のclass属性に存在するかどうかを確認します。 可能な値：
|
| item(index) | コレクションのインデックスを通じてクラス値を返します。インデックスは0から始まります。 索引が範囲外の場合は、null。 |
| remove(class1, class2, ...) | 要素から1つまたは複数のクラス名を削除します。 注意：存在しないクラスを削除してもエラーは発生しません。 |
| replace(oldClass, newClass) | 現在のクラスを新しいクラスで置き換えます。 |
| toggle(class, true|false) | 要素のクラス名の間で切り替えます。 引数が1つしか存在しない場合：クラスの値を切り替えます；それ以外の場合、0を返します。つまり、そのクラスが存在する場合、それを削除してfalseを返し、存在しない場合、それを追加してtrueを返します。 オプションの第2引数が存在する場合：第2引数の値がtrueの場合、指定されたクラス値を追加；第2引数の値がfalseの場合、それを削除します。 例： クラスを削除する：element .classList.toggle（"classToRemove", false）; クラスを追加する：element .classList.toggle（"classToAdd", true）; |
| 返り値： | DOMTokenList、要素のクラス名のリストを含む |
|---|---|
| DOMバージョン： | DOMレベル1 |
《p》要素に複数のクラスを追加する：
var elem = document.getElementById("x");
elem.classList.add("para", "shadow");テストを見て‹/›《p》要素から1つのクラスを削除する：
var elem = document.getElementById("x");
elem.classList.remove("para");テストを見て‹/›《p》要素から複数のクラスを削除する：
var elem = document.getElementById("x");
elem.classList.remove("para", "shadow");テストを見て‹/›《p》要素のクラス名の間で切り替える：
var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");テストを見て‹/›《p》要素が持つクラス名を返す：
var len = document.getElementById("x").classList.length;テストを見て‹/›《p》要素のクラス名を返す：
var name = document.getElementById("x").classList;テストを見て‹/›《p》要素の最初のクラス名（インデックス0）を返す：
var name = document.getElementById("x").classList[0];テストを見て‹/›item()メソッドを使用して<p>要素の最初のクラス名（インデックス0）を返す：
var name = document.getElementById("x").classList.item(0);テストを見て‹/›要素が「shadow」クラスを持っているかを確認する：
var list = document.getElementById("x").classList;
if (list.contains("shadow")) {
alert("Yes!!! The P element contains 'shadow' class");
} else {
alert("No 'shadow' class found");
}テストを見て‹/›クラス（「open」）を切り替えてサイドナビゲーションボタンを作成します：
CSSチュートリアル：CSSシレクタ
CSS 参考：CSS #idシレクタ
CSS 参考： CSS .class シレクタ
HTML DOM 参考：HTML DOM className属性
HTML DOM 参考：HTML DOM getElementsByClassName()メソッド
HTML DOM 参考：HTML DOM getElementById()メソッド
HTML DOM 参考：HTML DOM querySelector()メソッド