JavaScript | DOM 操作：CSS / クラス操作 – スタイル変更（style）

JavaScript
スポンサーリンク

style とは何か

style は、要素の「インライン CSS（その要素だけに直接書くスタイル）」を JavaScript から読み書きするためのプロパティです。クラス切り替えより細かく数値や色を直接操作でき、瞬間的な状態変更や計測値に基づくレイアウト調整に向いています。ここが重要です：style は“強い”指定（インライン）なので、むやみに多用せず、基本はクラスで制御し、必要な箇所だけピンポイントで使うと保守性が上がります。

基本の使い方（設定・取得・単位の扱い）

直接プロパティで設定する

<div id="box">内容</div>
<script>
  const box = document.getElementById("box");
  box.style.backgroundColor = "skyblue"; // ハイフンは camelCase（background-color → backgroundColor）
  box.style.width = "200px";             // 単位が必要なプロパティは文字列で
  box.style.opacity = 0.8;               // 単位不要なプロパティは数値でも可
</script>
HTML

CSS のハイフン付きプロパティは camelCase で書きます（font-size→fontSize、z-index→zIndex）。ここが重要です：px・%・rem などの“単位が必要なプロパティ”は必ず文字列で単位付き、opacity・zIndex・lineHeight（単位なし指定可）などは数値で設定できます。

実際の見え方を取得する（計算後の値）

<div id="panel" style="width: 50%"></div>
<script>
  const panel = document.getElementById("panel");
  const cs = getComputedStyle(panel);
  console.log(cs.width); // 計算後のピクセル値（例: "400px"）
</script>
HTML

element.style は“自分で直接セットしたインライン値”しか返しません。ここが重要です：最終的な見え方（CSS・継承・メディアクエリ反映後）は getComputedStyle で取得するのが正解です。

便利な操作（setProperty・removeProperty・cssText・CSS変数）

!important や CSS 変数を扱う

const el = document.getElementById("box");
el.style.setProperty("color", "red");                     // 通常の設定
el.style.setProperty("color", "red", "important");        // !important を付ける
el.style.setProperty("--accent", "#ff7b00");              // CSS 変数を設定（:root --accent を上書き）
JavaScript

ここが重要です：競合を避けるために !important を多用しない。設計で“クラスの優先度”を整え、どうしても必要な場面だけ使います。CSS 変数はテーマ切り替えと相性がよく、style から部分的に上書きできます。

スタイルを消す・まとめて置き換える

el.style.removeProperty("color"); // color をクリア（継承やスタイルシートに戻る）
el.style.cssText = "margin:8px; padding:8px; border:1px solid #ddd;"; // まとめて設定
JavaScript

ここが重要です：removeProperty で“その要素の直指定”を消し、cssText は一括適用に便利ですが、既存インラインを丸ごと置き換える点に注意します。

クラスと style の使い分け（設計の軸）

原則はクラス、例外で style

クラスは「意味・状態」を表し、CSS で見た目を決めるのが基本です。計算値（要素の実測幅・スクロール量）やユーザー入力に応じて“数値を直接いじる”場面だけ、style を使います。ここが重要です：見た目のルールは CSS に寄せ、JS は最小限のフラグ（クラス）と、ごく一部の動的数値だけを担当します。

トランジション・アニメーションは CSS、トリガーは JS

<style>
  .drawer { transition: transform 200ms ease; transform: translateX(-100%); }
  .drawer.is-open { transform: translateX(0); }
</style>
<aside id="drawer" class="drawer"></aside>
<script>
  const drawer = document.getElementById("drawer");
  drawer.classList.add("is-open"); // トリガーはクラス、動きは CSS に任せる
</script>
HTML

ここが重要です：アニメーションの定義は CSS に置き、JS は“切り替えの合図”だけ。style で逐次数値更新するより、滑らかで保守もしやすくなります。

パフォーマンスの勘所（再計算を減らす・一括更新）

変更をまとめて行う

const box = document.getElementById("box");
// 悪い例：1プロパティずつ散発更新 → レイアウト再計算が増える
box.style.width = "200px";
box.style.height = "120px";
box.style.margin = "8px";
// 良い例：クラスで一括、または cssText で一括
box.classList.add("size-md"); // CSS側で .size-md を定義しておく
JavaScript

ここが重要です：頻繁な style 更新は reflow/repaint の原因になります。クラス切り替えで“まとめて適用”に寄せると軽くなります。

requestAnimationFrame を使う（連続更新）

let running = false;
function animateWidth(el, target) {
  if (running) return;
  running = true;
  const start = el.offsetWidth;
  const end = target;
  const t0 = performance.now();
  function step(t) {
    const p = Math.min((t - t0) / 200, 1);
    el.style.width = `${start + (end - start) * p}px`;
    if (p < 1) requestAnimationFrame(step); else running = false;
  }
  requestAnimationFrame(step);
}
JavaScript

ここが重要です：連続的に数値を変えるなら rAF のフレームで更新し、無駄な再計算を避けます。とはいえ、可能なら CSS の transition を使う方が簡潔で滑らかです。

実践例（表示切替・実測値反映・テーマ変数）

表示の開閉（スタイルで直接制御）

<button id="toggle">開く</button>
<div id="panel" style="display:none;">内容</div>
<script>
  const btn = document.getElementById("toggle");
  const panel = document.getElementById("panel");
  btn.addEventListener("click", () => {
    const isHidden = panel.style.display === "none";
    panel.style.display = isHidden ? "block" : "none";
    btn.textContent = isHidden ? "閉じる" : "開く";
  });
</script>
HTML

表示/非表示はクラスで行う方が一般的ですが、最小限なら style.display の切り替えでも十分です。ここが重要です：プロジェクトでは「display 用のクラス（.is-hidden）」を用意して統一すると、設計が揃って保守が楽になります。

実測幅に合わせて動的に配置

<div id="meter" class="meter"><div class="bar"></div></div>
<style>
  .meter { width: 300px; background: #eee; }
  .bar   { height: 8px; background: #4caf50; }
</style>
<script>
  const meter = document.getElementById("meter");
  const bar = meter.querySelector(".bar");
  function setProgress(pct) {
    const clamped = Math.max(0, Math.min(100, pct));
    const total = getComputedStyle(meter).width; // 例: "300px"
    const px = parseFloat(total) * (clamped / 100);
    bar.style.width = `${px}px`;
  }
  setProgress(40);
</script>
HTML

ここが重要です：計測値に応じた“数値の反映”は style の得意分野。見た目のルールは CSS、数値の決定だけ JS で担うのが綺麗です。

CSS 変数でテーマを切替

<style>
  :root { --accent: #0066ff; }
  .btn { color: #fff; background: var(--accent); }
</style>
<button id="b" class="btn">保存</button>
<script>
  const b = document.getElementById("b");
  function setAccent(color) {
    document.documentElement.style.setProperty("--accent", color);
  }
  setAccent("#ff7b00"); // テーマカラーを即時変更
</script>
HTML

ここが重要です：CSS 変数は“広い範囲の色やサイズ”を一撃で変えられます。style.setProperty と組み合わせると、テーマやユーザー設定を気持ちよく反映できます。

まとめ

style はインライン CSS を直接操作するためのプロパティで、数値や色の“その場”の変更に強力です。プロパティ名は camelCase、単位が必要なものは文字列で、最終的な見え方は getComputedStyle で取得します。設計の軸は「見た目は CSS、切り替えはクラス、数値だけ style」で、!important は最小限。更新はまとめて行い、連続変更は rAF か CSS transition に寄せる。この型を身につければ、初心者でも安全で滑らか、保守しやすいスタイル操作が書けます。

スポンサーリンク
タイトルとURLをコピーしました