JavaScriptでのスタイルプロパティの直接割り当て方法

2024-10-092025-11-16

Web開発では、要素のスタイルをJavaScriptから動的に変更する必要が生じることがよくあります。JavaScriptを使って要素のスタイルを変更する最も一般的な方法は、DOM API の style プロパティを利用することです。の記事では、JavaScriptでスタイルを直接割り当てる際のポイントについて解説します。

`element.style` とは？

element.style は、HTML要素のインラインスタイルを設定・取得するためのプロパティです。CSSのプロパティをJavaScriptで変更する場合、element.style に対して直接アクセスします。たとえば、div 要素の背景色を赤にしたい場合、以下のように記述します。

const div = document.querySelector("div");
div.style.backgroundColor = "red";

CSSのプロパティ名との違い

CSSプロパティ名とJavaScriptの style プロパティで使うプロパティ名は少し異なります。CSSではハイフンで区切られるプロパティ名（例：background-color）が、JavaScriptではキャメルケース（例：backgroundColor）に変換されます。これは、JavaScriptのプロパティ名がキャメルケースを使う規則に従っているためです。

例:

CSS: background-color
JavaScript: backgroundColor

const div = document.querySelector("div");
div.style.backgroundColor = "blue";

スタイルの直接割り当てと安全性

次のコードは、要素に複数のスタイルを一度に設定しようとしている例です。

const container = document.querySelector('div#container');
container.style = "text-align: center; background-color: lightgrey;";

このコードは一見正しそうに見えますが、element.style に文字列を代入すると、既存のスタイルがすべて上書きされる可能性があります。また、このように複数のプロパティをまとめて設定するのは推奨されません。

推奨される方法：

スタイルプロパティごとに個別に設定することがベストプラクティスです。

const container = document.querySelector('div#container');
container.style.textAlign = "center";
container.style.backgroundColor = "lightgrey";

この方法なら、他のスタイルが上書きされることなく、新しいスタイルを追加できます。

数値プロパティの扱い

CSSプロパティには数値を持つものが多くあります。たとえば width や height はピクセル単位で指定することが多いですが、数値を直接指定すると正しく動作しません。単位を必ず付与する必要があります。

const img = document.querySelector("img");
img.style.width = "150px";  // 正しい設定

単位を忘れると、ブラウザはデフォルトの単位を適用しないため、思ったような結果が得られません。

複数のスタイルを設定する場合

複数のスタイルを一度に設定したい場合、個別に設定する方法もありますが、Object.assign() を使うと一度にまとめて設定できて便利です。

const img = document.querySelector("img");

Object.assign(img.style, {
    width: "150px",
    borderRadius: "50%",
    border: "1px solid black"
});

これにより、既存のスタイルを保持しながら新しいスタイルをまとめて追加できます。

`classList` を使ったスタイル変更

大量のスタイル変更が必要な場合や、条件に応じてスタイルを切り替えたい場合、element.style ではなく classList を使用することをおすすめします。classList を使うと、あらかじめ定義されたクラスを追加・削除することで、より効率的にスタイルを管理できます。

const container = document.querySelector('div#container');
container.classList.add("centered-container");

// CSS ファイル
// .centered-container {
//   text-align: center;
//   background-color: lightgrey;
// }

結論

JavaScriptを使ってスタイルを直接変更する際には、以下の点に注意しましょう。

CSSプロパティ名はキャメルケースに変換する。
スタイルプロパティごとに個別に設定し、element.style 全体に文字列を代入しない。
数値プロパティには必ず単位を付ける。
複数のスタイルを設定する際は Object.assign() を利用すると効率的。
多くのスタイル変更が必要な場合は classList を活用して、CSSクラスでスタイルを管理する。

これらのポイントを守れば、スタイルの変更が正しく適用され、コードも読みやすく保てるでしょう。

参考資料

MDN Web Docs: HTMLElement.style