【JavaScript】スタイルをJavaScriptから操作する方法

javascript-icon JavaScript
2022.06.08

こんにちは、かつコーチです。

前回はclassListを使ったクラスの操作を解説し、「見た目の切り替えはCSSに任せ、JavaScriptはクラスの付け外しに専念する」という考え方を紹介しました。

とはいえ、実務では「マウスの位置に合わせて要素を動かす」「計算結果に応じて色を変える」など、クラスだけでは対応しづらく、スタイルを直接JavaScriptから書き換えたい場面も出てきます。

今回は、そんなときに使う style プロパティの扱い方を解説します。

styleプロパティの基本

基本の書き方

要素のインラインスタイルを操作するには、style プロパティを使います。

<p id="message">お知らせ</p>

const message = document.querySelector("#message");

message.style.color = "red";
message.style.fontSize = "20px";
message.style.backgroundColor = "#f0f0f0";

このコードを実行すると、<p id="message"> タグに、次のようなインラインスタイルが直接追加されます。

<p id="message" style="color: red; font-size: 20px; background-color: rgb(240, 240, 240);">お知らせ</p>

style プロパティに対して、CSSのプロパティ名をキーにした値を代入すると、それがそのまま要素のインラインスタイルとして反映される仕組みです。

CSSプロパティ名との違いに注意

ここで一つ、書き方のルールに注意が必要です。

CSSでは background-color のようにハイフンでつなぐプロパティ名も、JavaScriptで style を使うときはキャメルケース（backgroundColor）で書く必要があります。

const box = document.querySelector("#box");

// ❌ ハイフンのままだとエラーにはならないが反映されない
box.style["background-color"] = "blue"; // 動くが非推奨の書き方

// ✅ キャメルケースで書くのが基本
box.style.backgroundColor = "blue";

これは、JavaScriptのプロパティ名にハイフンをそのまま使うと、引き算だと誤解されてしまう文法上の制約があるためです。

font-size は fontSize、border-radius は borderRadius というように、ハイフンの次の文字を大文字にして詰める、というルールだけ覚えておけば迷いません。

つまずきポイント：数値だけを渡してもスタイルが反映されない

単位を書き忘れるとどうなるか

私が実際にハマった経験として、数値だけを渡してスタイルが反映されずに悩んだことがあります。

❌ Before：単位をつけずに数値だけを渡してしまう

const box = document.querySelector("#box");

box.style.width = 300; // 単位をつけ忘れている
box.style.height = 200;

console.log(box.style.width);
// ""（空文字。反映されていない）

CSSのプロパティによっては、数値だけを渡しても無視されてしまい、スタイルが一切反映されません。

私は最初、コンソールにエラーも出ないため、「なぜ幅が変わらないんだろう」としばらく原因が分からず悩みました。

✅ After：px などの単位を文字列として明示する

const box = document.querySelector("#box");

box.style.width = "300px"; // 単位を含めた文字列で指定する
box.style.height = "200px";

console.log(box.style.width);
// "300px"

style に渡す値は基本的に文字列で、"300px" や "50%" のように単位まで含めて指定する必要があります。

数値をそのまま渡すクセがある人（特にReactなど他のライブラリの書き方に慣れている人）は、特に注意しておきたいポイントです。

複数のスタイルをまとめて設定する

cssTextでまとめて指定する

スタイルを1つずつ style.〇〇 = "..." と書いていくのは、変更する項目が多いと少し冗長に感じることがあります。

そういった場合は、style.cssText を使うと、CSSの記述をそのまま文字列でまとめて指定できます。

const box = document.querySelector("#box");

box.style.cssText = "width: 300px; height: 200px; background-color: skyblue; border-radius: 8px;";

CSSをそのままコピーして貼り付けられるので、スタイルの変更点が多いときに便利です。

ただし cssText は、既存のインラインスタイルを丸ごと上書きしてしまうという性質があるため、一部だけ追加したい場合には向きません。

getComputedStyleで現在の見た目を確認する

余談として、style プロパティで確認できるのは、あくまでインラインスタイルとして直接指定した値だけです。

CSSファイルで指定されているスタイルは、style プロパティからは確認できません。

<style>
  #box {
    width: 300px;
  }
</style>
<div id="box"></div>

const box = document.querySelector("#box");

console.log(box.style.width);
// ""（CSSファイルで指定した値はここには入らない）

console.log(getComputedStyle(box).width);
// "300px"（実際に画面に反映されている計算後の値）

CSSファイル・インラインスタイルなど、あらゆる指定を踏まえた「実際に画面に表示されている値」を知りたいときは、getComputedStyle() という関数を使います。

「なぜか style.width が空文字になる」という状況にぶつかったときは、この違いを思い出してみてください。

classListとstyleの使い分け

基本方針の再確認

前回、「見た目の切り替えはCSSに任せ、JavaScriptはクラスの付け外しに専念する」という方針を紹介しました。

この方針は、style を使えることを踏まえたうえでも、基本的には変わりません。

  • あらかじめ決まっている見た目の切り替え（開閉・選択状態など）→ classList でクラスを付け外しする
  • 計算結果や外部の値に応じて動的に変わる値（マウス座標、進捗バーの幅など）→ style で直接指定する
// classListが向いているケース：あらかじめ決まった見た目の切り替え
const menu = document.querySelector("#menu");
menu.classList.toggle("is-open");

// styleが向いているケース：計算結果に応じて変わる値
const progressBar = document.querySelector("#progress-bar");
const percent = 65; // 何らかの計算結果という想定
progressBar.style.width = percent + "%";

すべてを style で済ませようとすると、CSSで管理すべき見た目の情報がJavaScriptのコードに散らばってしまい、後から見た目を調整するときに修正箇所を探しづらくなります。

「決まったパターンの切り替え」か「動的に変化する値」か、という軸で使い分けを意識してみてください。

まとめ

この記事のポイント

  • style プロパティで要素のインラインスタイルを直接操作できる
  • CSSのプロパティ名はキャメルケース（backgroundColor など）で書く
  • 数値だけを渡すと反映されないことがあり、"300px" のように単位を含めた文字列で指定する
  • 複数まとめて指定したいときは style.cssText が便利だが、既存のスタイルを上書きする点に注意する
  • CSSファイル込みの実際の見た目を知りたいときは getComputedStyle() を使う
  • あらかじめ決まった見た目の切り替えは classList、動的に変わる値は style と使い分けるとコードが整理しやすい

次に読むべき記事

要素の取得・追加削除・クラス操作・スタイル操作と、DOMの基本的な操作方法がひと通りそろいました。

次回は、これらの操作をユーザーのクリックや入力といった「操作のきっかけ」と結びつける、イベント処理について解説します。

→ 次の記事：addEventListenerでイベントを設定する方法

タイトルとURLをコピーしました