HTML要素.style 対応: DOM Level 2（2000）

HTML要素のインラインスタイルを操作するためのプロパティです。CSSプロパティの取得・設定を行うことができます。

構文

// プロパティ名で直接取得・設定します。
element.style.プロパティ名 = "値";
var value = element.style.プロパティ名;

// cssTextでインラインスタイル全体を取得・設定します。
element.style.cssText = "プロパティ: 値; プロパティ: 値;";
var text = element.style.cssText;

// setProperty() / getPropertyValue() でCSS記法のプロパティ名を使用します。
element.style.setProperty("プロパティ名", "値");
var value = element.style.getPropertyValue("プロパティ名");

プロパティ・メソッド一覧

プロパティ / メソッド	概要
style.プロパティ名	キャメルケースでCSSプロパティを直接取得・設定します。ハイフン区切りのプロパティ名はキャメルケースに変換して指定します。例えば『background-color』は『backgroundColor』になります。
style.cssText	インラインスタイル全体を文字列として取得・設定します。設定時は既存のインラインスタイルがすべて上書きされます。
style.setProperty("名前", "値")	CSS記法のプロパティ名で値を設定します。ハイフン区切りのままで指定できます。第3引数に『"important"』を指定すると『!important』が付きます。
style.getPropertyValue("名前")	CSS記法のプロパティ名で値を取得します。インラインスタイルに設定されていない場合は空文字列が返されます。
style.removeProperty("名前")	指定したCSSプロパティをインラインスタイルから削除します。

サンプルコード

<div id="box" style="width: 100px;">ボックス</div>

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

// プロパティ名で直接設定します。ハイフン区切りはキャメルケースに変換します。
box.style.backgroundColor = "blue";
box.style.fontSize = "20px";
box.style.color = "white";

// getPropertyValue() でCSS記法のまま値を取得します。
console.log(box.style.getPropertyValue("background-color")); // 『blue』と出力されます。

// setProperty() でCSS記法のまま値を設定します。
box.style.setProperty("border", "2px solid red");

// cssText でインラインスタイルをまとめて設定します。既存のスタイルは上書きされます。
box.style.cssText = "width: 200px; height: 100px; background-color: green;";

// removeProperty() でプロパティを削除します。
box.style.removeProperty("height");

概要

『HTML要素.style』はHTML要素のインラインスタイルを操作するためのプロパティです。『style.プロパティ名』で直接読み書きする方法が最もシンプルですが、CSSのハイフン区切りのプロパティ名はキャメルケースに変換する必要があります。例えば『background-color』は『backgroundColor』、『font-size』は『fontSize』と指定します。

『HTML要素.style』で取得できるのはインラインスタイルのみです。CSSファイルやstyleタグで設定されたスタイルは取得できません。計算後の最終的なスタイルを取得したい場合は『window.getComputedStyle()』を使用してください。

インラインスタイルの操作はデバッグや一時的な変更には便利ですが、見た目を切り替えるだけであれば『HTML要素.classList』でクラスを付け替える方法がメンテナンス性に優れています。