概要
要素の style 属性に相当するオブジェクトを返します。
例
var div = document.getElementById("div1");
div.style.marginTop = ".25in";
注記
style プロパティは、style 属性を通して宣言されたインラインスタイル宣言と同等以上の優先度を持っているため、一つの特定の要素にスタイルを設定するのに役立ちます。
しかし、これは要素内のインライン style 属性で設定された CSS 宣言しか表さず、<head> セクションや外部スタイルシートなどのスタイル規則は含まれないため、要素のスタイル全般についての情報を得るのには役立ちません。
要素のすべての CSS プロパティの値を取得するには、代わりに window.getComputedStyle を使用するべきです。
Gecko DOM からアクセスできる CSS プロパティの一覧は DOM CSS プロパティ一覧をご覧ください。style プロパティを使用して DOM の要素にスタイルを適用する方法についての、追加の注意事項があります。
一般的には、他の style 属性で指定された CSS プロパティを上書きしないため、elt.setAttribute('style', '...') よりも style プロパティを使用することが望ましいです。
elt.style = "color: blue;" のように、文字列を (読取専用の) style プロパティに代入することによってスタイルを設定することは
できません
。これは、スタイル属性が CSSStyleDeclaration オブジェクトを返すためです。代わりに、スタイルプロパティを次のように設定してください:
elt.style.color = "blue"; // Directly var st = elt.style; st.color = "blue"; // Indirectly
次のコードはすべてのスタイルプロパティの名前と、elt 要素に明示的に設定された値、および継承された '計算値' を表示します。
var elt = document.getElementById("elementIdHere");
var out = "";
var st = elt.style;
var cs = window.getComputedStyle(elt, null);
for (x in st)
out += " " + x + " = '" + st[x] + "' > '" + cs[x] + "'\n";
仕様
DOM Level 2 Style: ElementCSSInlineStyle.style