.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>セクションまたは外部スタイルシートのような別の場所からのスタイルのルールが反映されない事から、 要素のスタイルの学習に用いることは有用とは言えません。(翻訳に自信なし) 全ての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';

関連項目

 Back to top

© 2017 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。 構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • 特定のブラウザに特化しすぎている情報やあまりにも古い情報、 または試験的に導入されているようなAPIや機能については、省略していることがあります。
  • 例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、 その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
  • MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。