classList は、要素のクラスを操作するための便利なプロパティです。クラスの追加・削除・切り替えが簡単にできます。
classList の基本メソッド
| メソッド | 説明 |
|---|---|
| add | クラスを追加 |
| remove | クラスを削除 |
| toggle | あれば削除、なければ追加 |
| contains | クラスがあるか確認 |
| replace | クラスを置換 |
add でクラスを追加
const element = document.getElementById('box'); // 1つ追加 element.classList.add('active'); // 複数追加 element.classList.add('active', 'highlight', 'visible');
remove でクラスを削除
element.classList.remove('active'); // 複数削除 element.classList.remove('active', 'highlight');
toggle で切り替え
element.classList.toggle('active'); // active があれば削除、なければ追加
第2引数で強制的に追加/削除もできます。
element.classList.toggle('active', true); // 強制的に追加 element.classList.toggle('active', false); // 強制的に削除
contains でチェック
if (element.classList.contains('active')) { console.log('active クラスがあります'); }
実際に動かしてみよう
HTML
CSS
JavaScript
<div id="box">ボックス</div> <button id="toggleBtn">toggle</button> <button id="addBtn">add</button> <button id="removeBtn">remove</button>
#box { width: 100px; height: 100px; background: #ddd; display: flex; align-items: center; justify-content: center; transition: all 0.3s; } #box.active { background: #4caf50; color: white; transform: scale(1.1); }
const box = document.getElementById('box'); document.getElementById('toggleBtn').addEventListener('click', () => { box.classList.toggle('active'); }); document.getElementById('addBtn').addEventListener('click', () => { box.classList.add('active'); }); document.getElementById('removeBtn').addEventListener('click', () => { box.classList.remove('active'); });
className との違い
classList
個別にクラスを操作できる。他のクラスに影響しない
className
文字列として全体を操作。うっかり上書きしやすい
// className は全体を置き換える element.className = 'active'; // 既存のクラスが消える // classList は追加するだけ element.classList.add('active'); // 既存のクラスは残る
replace でクラスを置換
element.classList.replace('old-class', 'new-class');
存在しないクラスを置換しようとすると、何も起きません（エラーにはならない）。
classList を使えば、クラスの操作が安全かつ直感的に行えます。
