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プロパティをインラインスタイルから削除します。

サンプルコード

sample_style.html

<div id="card" style="padding: 10px;">五条悟 — 呪術高専</div>
<p id="status">特級術師</p>
<button id="btn">スタイルを適用する</button>

sample_style.js

var card = document.getElementById("card");

// パターン1: プロパティ名で直接設定する（ハイフン区切りはキャメルケースに変換する）
card.style.backgroundColor = "#1a1a2e";
card.style.color = "white";
card.style.fontSize = "18px";
card.style.borderRadius = "8px";

// パターン2: インラインスタイルの値を取得する
console.log(card.style.backgroundColor); // 『rgb(26, 26, 46)』と出力されます。

// パターン3: setProperty() でCSS記法のままプロパティ名を指定する
card.style.setProperty("border", "2px solid #6200ea");

// パターン4: getPropertyValue() でCSS記法のまま値を取得する
console.log(card.style.getPropertyValue("border")); // 『2px solid rgb(98, 0, 234)』と出力されます。

// パターン5: cssText でインラインスタイルをまとめて設定する（既存は上書きされる）
var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
	card.style.cssText = "background-color: #6200ea; color: white; padding: 20px; border-radius: 8px;";
});

// パターン6: removeProperty() でプロパティを削除する
card.style.removeProperty("border");
console.log(card.style.getPropertyValue("border")); // 空文字列が返されます。

サンプルページはこちら

概要

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

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

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