SVGElement: style プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

style は SVGElement の読み取り専用プロパティで、要素のインラインスタイルを、動的な 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 はそのまま（小文字で）残ります。
  • プロパティがダッシュ区切りで複数の単語から構成されている場合は、ダッシュが削除されて キャメルケース へと変換されます。background-attachment は backgroundAttachment となります。
  • プロパティ float は JavaScript の予約語なので、 cssFloat に変換されます。

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

値

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

例

スタイル情報の取得

次のコードは style 属性が CSSStyleDeclaration の項目リストにどのように変換されるかを示しています。

html
<svg
  width="50"
  height="50"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 250 250"
  width="250"
  height="250">
  <circle
    cx="100"
    cy="100"
    r="50"
    id="circle"
    style="fill: red; stroke: black; stroke-width: 2px;" />
</svg>
<pre id="out"></pre>
js
const element = document.querySelector("circle");
const out = document.getElementById("out");
const elementStyle = element.style;

// We loop through all the element's styles using `for...in`
for (const prop in elementStyle) {
  // We check if the property belongs to the CSSStyleDeclaration instance
  // We also ensure that the property is a numeric index (indicating an inline style)
  if (
    Object.hasOwn(elementStyle, prop) &&
    !Number.isNaN(Number.parseInt(prop))
  ) {
    out.textContent += `${
      elementStyle[prop]
    } = '${elementStyle.getPropertyValue(elementStyle[prop])}'\n`;
  }
}

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報