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

// プロパティ名で直接取得・設定します。
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("プロパティ名");

<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要素のインラインスタイルは以下のように変化します。

<!-- 初期状態 -->
<div id="box" style="width: 100px;">ボックス</div>

<!-- style.backgroundColor 等の設定後 -->
<div id="box" style="width: 100px; background-color: blue; font-size: 20px; color: white; border: 2px solid red;">ボックス</div>

<!-- cssText で上書き後 -->
<div id="box" style="width: 200px; height: 100px; background-color: green;">ボックス</div>

<!-- removeProperty("height") 後 -->
<div id="box" style="width: 200px; background-color: green;">ボックス</div>

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

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

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