HTML要素.classList

対応:		ES6（ECMAScript 2015）

HTML要素のクラス属性を操作するためのプロパティです。クラスの追加・削除・切り替え・存在確認を行うメソッドが用意されています。

構文

// クラスを追加します。
element.classList.add("クラス名");

// クラスを削除します。
element.classList.remove("クラス名");

// クラスが存在すれば削除し、なければ追加します。
element.classList.toggle("クラス名");

// クラスの存在確認
var result = element.classList.contains("クラス名");

メソッド一覧

メソッド	概要
add("クラス名")	指定したクラスを追加します。すでに存在する場合は何も起きません。複数のクラスをカンマ区切りで同時に追加することもできます。
remove("クラス名")	指定したクラスを削除します。存在しないクラスを指定してもエラーにはなりません。複数のクラスをカンマ区切りで同時に削除することもできます。
toggle("クラス名")	指定したクラスが存在すれば削除し、存在しなければ追加します。メニューの開閉やアクティブ状態の切り替えなどに便利です。
contains("クラス名")	指定したクラスが存在するかどうかを『true』または『false』で返します。

サンプルコード

sample_classList.html

<div id="card" class="card">桐生一馬 — 堂島組</div>
<button id="btn-highlight">ハイライト切り替え</button>
<button id="btn-reset">リセット</button>

sample_classList.js

var card = document.getElementById("card");

// パターン1: クラスを追加する
card.classList.add("active");
console.log(card.className); // 『card active』と出力されます。

// パターン2: 複数のクラスを同時に追加する
card.classList.add("rounded", "shadow");
console.log(card.className); // 『card active rounded shadow』と出力されます。

// パターン3: クラスの存在を確認する
console.log(card.classList.contains("active")); // 『true』と出力されます。
console.log(card.classList.contains("hidden")); // 『false』と出力されます。

// パターン4: クラスを削除する（存在しないクラスを削除してもエラーにならない）
card.classList.remove("shadow");
console.log(card.classList.contains("shadow")); // 『false』と出力されます。

// パターン5: ボタンクリックでクラスをトグルする（あれば削除、なければ追加）
var btnHighlight = document.getElementById("btn-highlight");
btnHighlight.addEventListener("click", function() {
	card.classList.toggle("highlight");
});

// パターン6: 条件によってクラスを付け替える
var isActive = card.classList.contains("active");
if (isActive) {
	card.classList.remove("active");
	card.classList.add("inactive");
}

サンプルページはこちら

概要

『HTML要素.classList』はHTML要素のクラス属性を安全かつ簡単に操作するためのプロパティです。従来は『HTML要素.className』プロパティで文字列を直接操作する必要がありましたが、『HTML要素.classList』のメソッドを使うことで、個別のクラスの追加・削除が容易になりました。

特に『toggle()』メソッドはUIの状態切り替えに便利です。メニューの開閉、タブのアクティブ切り替え、ダークモードの切り替えなど、「ある状態とない状態を交互に切り替える」処理を1行で記述できます。

『add()』と『remove()』は存在しないクラスの追加・削除を行ってもエラーが発生しないため、事前にクラスの存在を確認する必要がありません。