1. 開発者向けのウェブ技術
  2. Web API
  3. SVGElement
  4. style

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

SVGElement: style プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

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`;
  }
}

仕様書

仕様書
CSS Object Model (CSSOM)
# dom-elementcssinlinestyle-style

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告