MathMLElement: attributeStyleMap プロパティ

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

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

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

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

値

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

例

以下は style 属性と attributeStyleMap プロパティの関係を示すコードです。

html
<div style="white-space: pre-line;">
  <math>
    <mrow>
      <mi>f</mi>
      <mo stretchy="false">(</mo>
      <mi id="el" style="border-top: 1px solid blue; color: red;">x</mi>
      <mo stretchy="false">)</mo>
      <mo>=</mo>
      <mi>x</mi>
    </mrow>
  </math>
  <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`;
}

仕様書

Specification
CSS Typed OM Level 1
# dom-elementcssinlinestyle-attributestylemap

ブラウザーの互換性

BCD tables only load in the browser

関連情報