JavaScript ・ DOM操作
classList
クラスの追加・削除・切り替え
要素のクラスを追加・削除・切り替えするためのプロパティです。見た目の変更はCSSに任せ、JavaScriptではクラスの付け外しだけを行うのが定番です。
01
サンプルコード
HTML
1<button type="button" id="toggle">詳細を表示</button>
2<p class="detail">営業時間：10:00〜18:00</p>
CSS
1button {
2 padding: 6px 16px;
3 border: 1px solid #b68235;
4 border-radius: 4px;
5 background: #fff;
6 color: #7d5411;
7 font: inherit;
8 cursor: pointer;
9}
10.detail {
11 display: none;
12 margin-top: 12px;
13}
14.detail.is-open {
15 display: block;
16}
JS
1const btn = document.querySelector('#toggle');
2const detail = document.querySelector('.detail');
3
4btn.addEventListener('click', () => {
5 const open = detail.classList.toggle('is-open');
6 btn.textContent = open ? '詳細を隠す' : '詳細を表示';
7 console.log('is-open:', open);
8});
02
実行結果
ブラウザでの表示ボタンを押すと詳細が表示・非表示になります
コンソール
- console.log() の出力がここに表示されます
03
解説
要素.classList は、要素に付いているクラスの一覧です。add() で追加、remove() で削除、toggle() で付いていれば外し・なければ付けます。
上の例では、ボタンを押すたびに is-open クラスを付け外しし、CSSの .detail.is-open で表示を切り替えています。
JavaScriptで style を直接書き換えるよりも、見た目をCSSにまとめておけるため、管理しやすくなります。
04
応用例・注意点
主なメソッド
| メソッド | 説明 |
|---|---|
add('名前') | クラスを追加 |
remove('名前') | クラスを削除 |
toggle('名前') | 付け外しを切り替え（付いた後の状態を true / false で返す） |
toggle('名前', 条件) | 条件が true なら付け、false なら外す |
contains('名前') | 付いているか調べる |
ダークモードを切り替える
html 要素にクラスを付け、CSS変数で配色を切り替えます。
HTML
1<button type="button" id="theme">テーマ切替</button>
CSS
1:root.dark {
2 --bg: #1a1918;
3}
4body {
5 background: var(--bg, #fff);
6}
JS
1document.querySelector('#theme').addEventListener('click', () => {
2 document.documentElement.classList.toggle('dark');
3});
注意点
- 01クラス名に . （ドット）は付けません（add('.is-open') は誤り）。
- 02状態を表すクラスには is- などの接頭辞を付けると、役割が分かりやすくなります。