From b1ce1b0628048b86ff17217183bda3f4f744288b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 10 Aug 2024 02:18:36 +0900 Subject: [PATCH] =?UTF-8?q?2024/07/10=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mathmlelement/attributestylemap/index.md | 72 +++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 files/ja/web/api/mathmlelement/attributestylemap/index.md diff --git a/files/ja/web/api/mathmlelement/attributestylemap/index.md b/files/ja/web/api/mathmlelement/attributestylemap/index.md new file mode 100644 index 00000000000000..5997620bf4d59e --- /dev/null +++ b/files/ja/web/api/mathmlelement/attributestylemap/index.md @@ -0,0 +1,72 @@ +--- +title: "MathMLElement: attributeStyleMap プロパティ" +short-title: attributeStyleMap +slug: Web/API/MathMLElement/attributeStyleMap +l10n: + sourceCommit: 4f263d8dfb90fa2253e090ee339ae14d1907fa63 +--- + +{{APIRef("CSSOM")}} + +**`attributeStyleMap`** は {{domxref("MathMLElement")}} インターフェイスの読み取り専用プロパティで、生きた {{domxref("StylePropertyMap")}} オブジェクトを返します。これは、要素のインラインの `style` 属性で定義されているか、スクリプトを介して {{domxref("MathMLElement")}} インターフェイスの {{domxref("MathMLElement.style", "style")}} プロパティを使用して割り当てられている、要素のスタイルプロパティのリストです。 + +一括指定プロパティは展開されます。`border-top: 1px solid black` を設定すると、個別指定プロパティ ({{cssxref("border-top-color")}}, {{cssxref("border-top-style")}}, {{cssxref("border-top-width")}}) が代わりに設定されます。 + +{{domxref("MathMLElement.style", "style")}} プロパティと `attributeStyleMap` プロパティの主な違いは、`style` プロパティが {{domxref("CSSStyleDeclaration")}} オブジェクトを返すのに対し、`attributeStyleMap` プロパティは {{domxref("StylePropertyMap")}} オブジェクトを返すことです。 + +自分自身を書き込むことはできませんが、{{domxref("StylePropertyMap")}} オブジェクトを通してインラインスタイルを読み書きすることができます。これは `style` プロパティから返される {{domxref("CSSStyleDeclaration")}} オブジェクトと同様です。 + +## 値 + +生きた {{domxref("StylePropertyMap")}} オブジェクトです。 + +## 例 + +以下は `style` 属性と `attributeStyleMap` プロパティの関係を示すコードです。 + +```html +
+ + + f + ( + x + ) + = + x + + +
+
+``` + +```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`; +} +``` + +{{EmbedLiveSample("Examples", "200", "200")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("MathMLElement.style")}} +- {{domxref("HTMLElement.attributeStyleMap")}} +- {{domxref("SVGElement.attributeStyleMap")}}