HTMLElement.styleプロパティは、要素のインライン style と同様に取得されます。取得時には要素のインライン style 属性で定義されたすべてのスタイルプロパティを表す CSSStyleDeclaration オブジェクトを返します。style 経由でアクセス可能な CSS プロパティのリストについては、CSS プロパティリファレンスを参照してください。style プロパティは CSS カスケードで style 属性によるインラインスタイル宣言と同じ(かつ最高)優先順位を持ちます。

styleを設定する

Styles は style プロパティに文字列を直接代入してセットすべきではありません (elt.style = "color: blue;" のように)、なぜならこれは style 属性が読み取り専用の CSSStyleDeclaration オブジェクトを返すので、読み取り専用と考えられています。その代わりに、styles は style. のプロパティに値を代入してセットできます。要素に対して特定のスタイルを他のスタイル値を変えずに追加するため、style の個々のプロパティを使うのが好ましいです(elt.style.color = '...'のように)。なぜなら elt.style.cssText = '...'elt.setAttribute('style', '...') では要素のインラインスタイルを、既存のインラインスタイルを上書きすることでセットするからです。elt.style.<property>を使ってスタイルをセットする時、プロパティ名はキャメルケースであって、ケバブケースでないのに注意してください  (つまり elt.style.fontSizeとなり、 elt.style.font-sizeではありません)。

スタイル宣言は null をセットしてリセットします。例、elt.style.color = null

// Set multiple styles in a single statement
elt.style.cssText = "color: blue; border: 1px solid black"; 
// Or
elt.setAttribute("style", "color:red; border: 1px solid blue;");


elt.style.color = "blue"; // Set specific style while leaving other inline style values untouched

スタイル情報を取得する

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" の値があって、要素のスタイルプロパティにはないことに注意してください。

仕様

DOM Level 2 Style: ElementCSSInlineStyle.style

ブラウザ実装状況

注: Starting in Gecko 2.0, you can set SVG properties' values using the same shorthand syntax. For example:

element.style.fill = 'lime';

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: Uemmra3, momdo, fscholz, jsx, Shoot, Marsf, Okome
 最終更新者: Uemmra3,