HTMLElement: style プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

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

一括指定プロパティは展開されます。style="border-top: 1px solid black" と設定すると、代わりに個別指定プロパティ (border-top-color,border-top-style,border-top-width) が設定されます。

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

したがって、他のスタイル値を変えずに要素に固有のスタイルを追加するには、一般にCSSStyleDeclaration オブジェクトに個々のプロパティを設定することをお勧めします。例えば、element.style.backgroundColor = "red" と書くことができます。

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

メモ:CSS プロパティ名は以下のルールで JavaScript の識別子に変換されます。

プロパティが 1 語で構成されている場合は、そのままの形になります。height はそのまま（小文字で）残ります。float は JavaScript で予約語であるため、このプロパティ名は過去にはcssFloat に変換されていました。現行のブラウザーではすべて、JavaScript でfloat を直接使用して CSS のfloat プロパティにアクセスすることに対応していますが、古いブラウザーではcssFloat が使用されており、現在でも別名として対応しています。
プロパティがダッシュ区切りで複数の単語から構成されている場合は、ダッシュが削除されてキャメルケースへと変換されます。background-attachment はbackgroundAttachment となります。

style プロパティは、CSS カスケードにおいて、style 属性で設定されたインラインスタイル宣言と同じ優先順位を持ちます。

値

動的なCSSStyleDeclaration オブジェクトです。

例

スタイル情報の取得

次のコードスニペットは、要素のstyle プロパティで取得した値と、HTML 属性で設定された一連のスタイルの関係を示します。

html

<!doctype html><html lang="en-US">  <body>    <div>      An example div    </div>    <pre></pre>  </body></html>

const element = document.getElementById("elt");const out = document.getElementById("out");const elementStyle = element.style;// すべての要素のスタイルを、 `for...in` を使用して走査for (const prop in elementStyle) {  // プロパティが CSSStyleDeclaration インスタンスに属しているか確認する  // また、プロパティが（インラインスタイルを示す）数値インデックスであることを確認する  if (    Object.hasOwn(elementStyle, prop) &&    !Number.isNaN(Number.parseInt(prop))  ) {    out.textContent += `${      elementStyle[prop]    } = '${elementStyle.getPropertyValue(elementStyle[prop])}'\n`;  }}

なお、font-weight はelementStyle の値として載っていませんが、これは要素自体のstyle 属性の中で定義されていないからです。また、style 属性で定義されている一括指定のborder-top プロパティは、直接載っていないことに注意してください。代わりに、対応する 3 つの個別指定プロパティ (border-top-color,border-top-style,border-top-width) に置き換えられています。