Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

JavaScript辞典

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");

実行結果

上記のコードを順番に実行すると、『class』属性は以下のように変化します。

<!-- 初期状態 -->
<div id="box" class="panel">ボックス</div>

<!-- classList.add("active") 後 -->
<div id="box" class="panel active">ボックス</div>

<!-- classList.add("rounded", "shadow") 後 -->
<div id="box" class="panel active rounded shadow">ボックス</div>

<!-- classList.remove("panel") 後 -->
<div id="box" class="active rounded shadow">ボックス</div>

console.log(box.classList.contains("active")); // 『true』と出力されます。

概要

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

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

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

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

WebProgrammingPlaceウェブプログラミングプレイス