HTMLElement.style

style プロパティは読み取り専用で、要素のインラインスタイルを CSSStyleDeclaration オブジェクトの形で返します。このオブジェクトには、その要素のインラインの style 属性で定義されている属性に値が割り当てられている、その要素のすべてのスタイルプロパティのリストが入っています。

メモ: style 経由でアクセス可能な CSS プロパティのリストについては、CSS プロパティリファレンスを参照してください。style プロパティは CSS カスケードで style 属性によるインラインスタイル宣言と同じ（かつ最高の）優先順位を持ちます。

値

CSSStyleDeclaration オブジェクトで、以下のプロパティがあります。

computed フラグ

Unset.

親の CSS のルール

Null.

オーナーのノード

this

スタイルの設定

このプロパティは読み取り専用と考えられていますが、 style に直接文字列を代入することで、インラインスタイルを設定することができます。この場合、その文字列は CSSStyleDeclaration.cssText に転送されます。この方法で style を使用すると、その要素のインラインスタイルをすべて完全に上書きします。

したがって、他のスタイルの値を変更せずに要素の特定のスタイルを追加したい場合は、一般に CSSStyleDeclaration オブジェクトの個別のプロパティを設定したほうがうまく行きます。例えば、 element.style.backgroundColor = "red" のようにします。

スタイル宣言は null または空文字列を設定することでリセットすることができます。例えば elt.style.color = null のようにします。

スタイル情報の取得

style プロパティは、要素に適用されているスタイルを完全に知るためには有用ではありません。これは、要素のインラインの style 属性に設定されている CSS 宣言のみを表し、 <head> セクションのスタイル規則や外部のスタイルシートなど、他の場所のスタイル規則に由来するものを表してはいないからです。要素のすべての CSS プロパティの値を取得するには、代わりに Window.getComputedStyle() を使用する必要があります。

次のコードスニペットは、要素の style プロパティで取得した値と、getComputedStyle() で取得した値の違いを実演します。

<!DOCTYPE HTML>
<html>
  <body style="font-weight:bold;">
    <div style="color:red" id="myElement">..</div>
  </body>
</html>

var element = document.getElementById("myElement");
var out = "";
var elementStyle = element.style;
var computedStyle = window.getComputedStyle(element, null);

for (prop in elementStyle) {
  if (elementStyle.hasOwnProperty(prop)) {
    out += "  " + prop + " = '" + elementStyle[prop] + "' > '" + computedStyle[prop] + "'\n";
  }
}
console.log(out)

出力されるコードは次のようなものです。

...
fontWeight = '' > 'bold'
color = 'red' > 'rgb(255, 0, 0)'
...

font-weight のスタイルの計算値に bold の値がありますが、要素の style プロパティにはないことに注意してください。

仕様書

Specification
CSS Object Model (CSSOM)
# dom-elementcssinlinestyle-style

ブラウザーの互換性

BCD tables only load in the browser

関連情報