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

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

View in English Always switch to English

SVGElement: attributeStyleMap プロパティ

利用可能性は限定的

この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。

attributeStyleMap は SVGElement インターフェイスの読み取り専用のプロパティで、生きた StylePropertyMap を返します。これには、要素のインライン スタイル属性で定義されているか、スクリプト経由で SVGElement インターフェイスの style プロパティを使用して割り当てられた、要素のスタイルプロパティのリストが入ります。

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

style プロパティと attributeStyleMap プロパティの主な違いは、style プロパティが CSSStyleDeclaration オブジェクトを返すのに対し、attributeStyleMap プロパティは StylePropertyMap オブジェクトを返すことです。

このプロパティ自身は書き込みできませんが、style プロパティを通じて返す CSSStyleDeclaration オブジェクトと同様に、このプロパティが返す StylePropertyMap オブジェクトを通じてインラインスタイルを読み書きすることができます。

値

生きた StylePropertyMap オブジェクトです。

例

次のコードは style 属性と attributeStyleMap プロパティの関係を示しています。

html
<div style="white-space: pre-line;">
  <svg
    width="50"
    height="50"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 250 250"
    width="250"
    height="250"
    style="white-space: pre-line;">
    <circle
      cx="100"
      cy="100"
      r="50"
      id="el"
      style="border-top: 1px solid blue; color: red;" />
  </svg>
  <div id="output"></div>
</div>
css
#el {
  font-size: 16px;
}
js
const element = document.getElementById("el");
const output = document.getElementById("output");

for (const property of element.attributeStyleMap) {
  output.textContent += `${property[0]} = ${property[1][0].toString()}\n`;
}

仕様書

仕様書
CSS Typed OM Level 1
# dom-elementcssinlinestyle-attributestylemap

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

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

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