.style

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style

このプロパティは、要素のstyle属性を表すCSSStyleDeclarationオブジェクトを返します。このプロパティは、要素のstyle属性を表すCSSStyleDeclarationオブジェクトを返します。 styleを通してアクセスすることが出来るCSSプロパティのリストは、 CSS Properties Referenceを参照してください。

styleの設定

styleプロパティは、style属性を通して定義されたインライン属性としてのCSSカスケードと同じ(まはた最上位の)優先度を持つため、特定の要素にstyleを設定するのに便利です。

一般的に、elt.setAttribute('style', '...')を使用するより、 styleプロパティが他に指定されている可能性のあるCSSプロパティを上書きしないことから、 styleプロパティを使用する方が良いとされています。

Operaを除き、スタイルは(読み取り専用である)styleプロパティへ、 elt.style = "color: blue;"のようにすることで、文字列を割り当てることで設定することは出来ません。これは、style属性がCSSStyleDeclarationを返すためです。代わりにstyleプロパティを、次のように設定することが出来ます。

elt.style.color = "blue";  // 直接的に

var st = elt.style;
st.color = "blue";         // 間接的に

style情報の取得

一般的にstyleプロパティは、要素のインラインsytle属性のCSS定義の設定のみを表し、 <head>セクションまたは外部スタイルシートのような別の場所からのスタイルのルールが反映されない事から、要素のスタイルの学習に用いることは有用とは言えません。(翻訳に自信なし) section, or external style sheets. --> 全てのCSSプロパティの値を取得したいのであれば、代わりにwindow.getComputedStyle()を使用するべきです。

例

var div = document.getElementById("div1");
div.style.marginTop = ".25in";

下記のコードは、要素eltの全てのstyleプロパティの名前、明示的に設定した値、そして継承された'算出'(computed)された値を表示します。

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

互換性

注意: Gecko 2.0からは、SVGプロパティの値を同じ略記文法を使用して設定可能になりました。下記はその例になります。

element.style.fill = 'lime';

.style

styleの設定

style情報の取得

例

仕様

互換性

関連項目