JavaScript: DOM スタイル
最終更新：2026-10-13
JS でページのコンテンツと構造を変更する方法を学んだ後、次のステップはスタイルの制御です。要素の色を変えたり、表示/非表示を切り替えたり、テーマを切り替えたりします。CSS は静的スタイルを担当し、JS は動的スタイルを担当し、 together でインタラクティブ性を実現します。
1. style プロパティ
element.style は HTML のインラインスタイル（style="..."）に対応します。インラインスタイルの読み書きのみ可能で、CSS ファイルや <style> タグで定義されたルールにはアクセスできません。
HTML
<div id="box">こんにちはスタイル</div>
<script>
const element = document.getElementById('box');
element.style.color = 'red';
element.style.fontSize = '20px'; // 注意：CSS の font-size → JS では fontSize
</script>
⚠️ 注意： ハイフン付きの CSS プロパティ名は JS ではキャメルケースに変換する必要があります：
background-color → backgroundColor、font-size → fontSize。これは初心者にとって最も一般的な落とし穴の1つです。
HTML
<div id="box" style="color: blue;">こんにちはスタイル</div>
<script>
const box = document.getElementById('box');
console.log('現在の色:', box.style.color);
box.style.color = 'red';
box.style.fontSize = '24px';
box.style.backgroundColor = '#f0f0f0';
box.style.padding = '10px';
box.style.borderRadius = '8px';
</script>
2. className と classList
要素の class を操作することは、JS でスタイルを変更する最も一般的な方法です。CSS でクラスを事前定義し、JS でクラス名を追加または削除するだけです。
(1) className
className は文字列であり、代入すると既存のすべてのクラスを上書きします。
HTML
<div id="demo1" class="item">要素 1</div>
<div id="demo2" class="item">要素 2</div>
<script>
const el1 = document.getElementById('demo1');
el1.className = 'active'; // 上書き。'active' のみ残る
const el2 = document.getElementById('demo2');
el2.className += ' highlight'; // 追加。ただし原始的でエラーが起きやすい
console.log('el1.className:', el1.className);
console.log('el2.className:', el2.className);
</script>
💡 ヒント：
className への代入は、スマホを工場出荷時に戻してから新しいアプリをインストールするようなもの。以前のすべてが消えます。ほとんどの場合、classList がより安全です。
(2) classList
classList は DOMTokenList オブジェクトで、他のクラスに影響を与えずにクラスの追加、削除、トグルのメソッドを提供します。
| メソッド | 説明 |
|---|---|
add('cls') |
クラスの追加 |
remove('cls') |
クラスの削除 |
toggle('cls') |
存在すれば削除、なければ追加 |
contains('cls') |
クラスの存在をチェック。真偽値を返す |
(3) サンプル：テーマ切り替え
▶ 試してみよう(4) サンプル：表示と非表示
▶ 試してみよう3. getComputedStyle
element.style はインラインスタイルしか読み取れません。CSS ファイルや <style> タグで定義されたスタイルを読み取るには？答えは getComputedStyle です。
HTML
<div id="box">テスト要素</div>
<script>
const element = document.getElementById('box');
const style = window.getComputedStyle(element);
console.log(style.color); // "rgb(0, 0, 0)"
console.log(style.fontSize); // "16px"
</script>
💡 ヒント：
getComputedStyle は要素の最終的な計算スタイルを返します。ブラウザがすべての CSS ソース（インライン、スタイルタグ、CSS ファイル、継承）をマージした結果です。戻り値は読み取り専用です。
(1) サンプル：計算スタイルの取得
▶ 試してみよう4. cssText による一括スタイリング
要素に複数のインラインスタイルを一度に設定する必要がある場合、style.xxx = ... を1行ずつ書くのは冗長です。cssText で一度に書けます。
HTML
<div id="box">一括スタイリング</div>
<script>
const element = document.getElementById('box');
element.style.cssText = 'color: red; font-size: 20px; padding: 10px;';
</script>
⚠️ 注意：
cssText への代入は既存のすべてのインラインスタイルを置換します。追加するには += を使いましょう：element.style.cssText += '; color: red;'。
(1) サンプル：cssText による一括スタイリング
▶ 試してみよう❓ よくある質問
Q
element.style.color で CSS ファイルで設定された色を読み取れないのはなぜですか？A
style プロパティはインラインの style="..." にのみ対応します。CSS ファイルや <style> タグのルールはその範囲外です。最終的な値を読み取るには getComputedStyle(element).color を使いましょう。Q
classList.toggle で条件付きで追加/削除できますか？A はい。
classList.toggle('cls', force) は第2パラメータを取ります。true は強制追加、false は強制削除です。force ? add : remove と同等です。Q スタイルの変更には
style と classList のどちらを使うべきですか？A ルールはシンプルです。一時的なスタイル変更には
style を、状態/テーマの切り替えには classList と CSS クラスを使いましょう。後者はスタイルを CSS に、ロジックを JS に保つことができ、メンテナンスが容易になります。📖 まとめ
element.styleはインラインスタイルのみを操作し、CSS ファイルのルールは読み取れない。プロパティ名は書き込み時にキャメルケースを使用。classNameへの代入はすべてのクラスを上書きする。classListのadd/remove/toggleを使う方が安全。getComputedStyleは要素の最終計算スタイルを読み取る。戻り値は読み取り専用。cssTextはインラインスタイルを一括設定するが、代入は既存のインラインスタイルを置換する。
📝 練習問題
- 基礎：3つのボタン（赤/緑/青）を持つページを作成してください。クリック時に
style.backgroundColorを使ってページの背景色を変更してください。 - 中級：
classList.toggleを使って「ハイライト」機能を実装してください。段落をクリックするとハイライトクラス（黄色背景）がトグルされ、再度クリックすると削除されます。 - チャレンジ：シンプルな「ナイトモード」を実装してください。ボタンで切り替え、
getComputedStyleを使って現在の背景色を読み取りモードを判定し、ページに「現在のモード：昼/夜」を表示してください。
