Element: classList プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Element.classList は読み取り専用のプロパティで、生きた DOMTokenList コレクションでその要素の class 属性を返します。これを使用してクラスリストを操作することができます。

classList を使用することは、 element.className から取得した空白区切りの文字列として要素のクラスのリストにアクセスすることの便利な代替手段になります。

値

DOMTokenList で、その要素の class 属性を返します。 class 属性が設定されていない場合や空の場合は、空の DOMTokenList を返します。すなわち、 DOMTokenList の length プロパティが 0 になります。

DOMTokenList 自体は読み取り専用ですが、 add(), remove(), replace(), toggle() の各メソッドを用いてオブジェクトを変更することはできます。

要素が指定されたクラスを含むかどうかは、classList.contains() メソッドを用いて検査することができます。

例

const div = document.createElement("div");
div.className = "foo";

// 最初の状態: <div class="foo"></div>
console.log(div.outerHTML);

// classList API を用いてクラスを除去、追加
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// visible が設定されていれば除去し、なければ追加
div.classList.toggle("visible");

// i が 10 未満であるかどうかの条件によって visible を追加または除去
div.classList.toggle("visible", i < 10);

// false
console.log(div.classList.contains("foo"));

// 複数のクラスを追加または除去
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// スプレッド構文を使用したクラスの追加または除去
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);

// "foo" クラスを "bar" クラスで置き換え
div.classList.replace("foo", "bar");

仕様書

Specification
DOM Standard # ref-for-dom-element-classlist①

ブラウザーの互換性

BCD tables only load in the browser

値

例

仕様書

ブラウザーの互換性

関連情報