Terms Privacy

© Rollpie

JavaScript
18 Jan 2026

classList で class を操作する

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 を使えば、クラスの操作が安全かつ直感的に行えます。

9 views