EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語
404 Not Found

404 Not Found

nginx

DOM スタイル

JS でページのコンテンツと構造を変更する方法を学んだ後、次のステップはスタイルの制御です。要素の色を変えたり、表示/非表示を切り替えたり、テーマを切り替えたりします。CSS は静的スタイルを担当し、JS は動的スタイルを担当し、 together でインタラクティブ性を実現します。

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つです。

例：style プロパティの読み書き

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>
▶ 試してみよう

className と classList

要素の class を操作することは、JS でスタイルを変更する最も一般的な方法です。CSS でクラスを事前定義し、JS でクラス名を追加または削除するだけです。

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 がより安全です。

classList

classList は DOMTokenList オブジェクトで、他のクラスに影響を与えずにクラスの追加、削除、トグルのメソッドを提供します。

メソッド 説明
add('cls') クラスの追加
remove('cls') クラスの削除
toggle('cls') 存在すれば削除、なければ追加
contains('cls') クラスの存在をチェック。真偽値を返す

例：テーマ切り替え

HTML 
<style>
  .dark { background: #222; color: #fff; }
  .light { background: #fff; color: #222; }
  body { transition: background 0.3s, color 0.3s; padding: 20px; }
</style>

<body class="light">
  <h2>テーマ切り替えデモ</h2>
  <p>ボタンをクリックしてライトテーマとダークテーマを切り替えましょう</p>
  <button id="toggleBtn">テーマ切り替え</button>
</body>

<script>
const body = document.body;
const btn = document.getElementById('toggleBtn');

btn.addEventListener('click', function() {
  body.classList.toggle('dark');
  body.classList.toggle('light');
});
</script>
▶ 試してみよう

例：表示と非表示

HTML 
<style>
  .hidden { display: none; }
  .panel { border: 1px solid #ccc; padding: 15px; margin-top: 10px; }
</style>

<button id="togglePanel">パネルの表示/非表示</button>
<div id="panel" class="panel">これはパネルのコンテンツです</div>

<script>
const panel = document.getElementById('panel');
const btn = document.getElementById('togglePanel');

btn.addEventListener('click', function() {
  panel.classList.toggle('hidden');
  btn.textContent = panel.classList.contains('hidden') ? 'パネルを表示' : 'パネルを非表示';
});
</script>
▶ 試してみよう

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 ファイル、継承）をマージした結果です。戻り値は読み取り専用です。

例：計算スタイルの取得

HTML 
<style>
  #measured { font-size: 18px; color: green; margin: 20px; }
</style>

<div id="measured">スタイルを計測してください</div>

<script>
const el = document.getElementById('measured');

console.log('style 属性からの色:', el.style.color);
console.log('計算スタイルからの色:', getComputedStyle(el).color);
console.log('計算スタイルからのフォントサイズ:', getComputedStyle(el).fontSize);
console.log('計算スタイルからのマージン:', getComputedStyle(el).margin);
</script>
▶ 試してみよう

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;'。

例：cssText による一括スタイリング

HTML 
<div id="box">一括スタイリング</div>

<script>
const box = document.getElementById('box');
box.style.cssText = 'color: white; background: #4CAF50; padding: 15px; border-radius: 8px; font-size: 18px; text-align: center;';
</script>
▶ 試してみよう

📖 まとめ

  1. element.style はインラインスタイルのみを操作し、CSS ファイルのルールは読み取れない。プロパティ名は書き込み時にキャメルケースを使用。
  2. className への代入はすべてのクラスを上書きする。classList の add/remove/toggle を使う方が安全。
  3. getComputedStyle は要素の最終計算スタイルを読み取る。戻り値は読み取り専用。
  4. 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 に保つことができ、メンテナンスが容易になります。

📝 演習

  1. 基礎：3つのボタン（赤/緑/青）を持つページを作成してください。クリック時に style.backgroundColor を使ってページの背景色を変更してください。
  2. 中級：classList.toggle を使って「ハイライト」機能を実装してください。段落をクリックするとハイライトクラス（黄色背景）がトグルされ、再度クリックすると削除されます。
  3. チャレンジ：シンプルな「ナイトモード」を実装してください。ボタンで切り替え、getComputedStyle を使って現在の背景色を読み取りモードを判定し、ページに「現在のモード：昼/夜」を表示してください。
100%