Terms Privacy

© Rollpie

JavaScript
18 Jan 2026

id や className プロパティ

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 も知っておくと、既存コードを読むときや、全体を一気に設定したいときに役立ちます。

8 views