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』で返します。

サンプルコード

<div id="box" class="panel">ボックス</div>
<button id="btn">切り替え</button>

var box = document.querySelector("#box");

// クラスを追加します。
box.classList.add("active");
// class="panel active"

// クラスの存在確認
console.log(box.classList.contains("active")); // 『true』と出力されます。

// ボタンクリックでクラスを切り替えます。
var btn = document.querySelector("#btn");
btn.addEventListener("click", function() {
	box.classList.toggle("highlight");
});

// 複数のクラスを同時に追加します。
box.classList.add("rounded", "shadow");

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

概要

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

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

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