id と className は、要素の id 属性と class 属性に直接アクセスするプロパティです。classList が登場する前は className が主流でした。
id プロパティ
要素の id を取得・設定します。
<div id="container">コンテナ</div>
const element = document.getElementById('container'); // 取得 console.log(element.id); // "container" // 設定 element.id = 'new-container';
className プロパティ
要素の class 属性を文字列として取得・設定します。
<div class="box active large">ボックス</div>
const box = document.querySelector('.box'); // 取得（スペース区切りの文字列） console.log(box.className); // "box active large" // 設定（全体を置き換え） box.className = 'new-class'; // 追加するなら文字列連結 box.className += ' another-class';
className の注意点
className は文字列全体を操作するので、うっかり上書きしてしまう危険があります。
const element = document.querySelector('.item'); console.log(element.className); // "item primary" // 間違い：既存のクラスが消える element.className = 'active'; console.log(element.className); // "active"（item と primary が消えた） // 正解：追加するなら += element.className = 'item primary'; element.className += ' active'; console.log(element.className); // "item primary active"
classList との比較
className
文字列として全体を操作。古いブラウザでも使える
classList
add/remove/toggle で個別に操作。安全で便利
className を使うケース
一気に複数のクラスを設定したい場合は、className のほうがシンプルなこともあります。
// className なら1行 element.className = 'card active highlight'; // classList だと複数回 element.className = ''; element.classList.add('card', 'active', 'highlight');
実際に動かしてみよう
HTML
CSS
JavaScript
<div id="target" class="box">ターゲット</div> <button id="setBtn">className で設定</button> <button id="addBtn">className で追加</button> <p>現在のクラス: <span id="display">box</span></p>
.box { padding: 20px; background: #eee; margin-bottom: 10px; } .active { background: #4caf50; color: white; } .large { font-size: 24px; }
const target = document.getElementById('target'); const display = document.getElementById('display'); document.getElementById('setBtn').addEventListener('click', () => { target.className = 'box active'; display.textContent = target.className; }); document.getElementById('addBtn').addEventListener('click', () => { target.className += ' large'; display.textContent = target.className; });
基本的には classList を使うのがおすすめですが、className も知っておくと、既存コードを読むときや、全体を一気に設定したいときに役立ちます。
