From 2d7d2bfd597c6742effec4917e3252f031036c2f Mon Sep 17 00:00:00 2001 From: skyclouds2001 Date: Thu, 9 May 2024 02:32:17 +0800 Subject: [PATCH] add --- .../htmlelement/attributestylemap/index.md | 6 +- .../mathmlelement/attributestylemap/index.md | 72 +++++++++++++++++ .../web/api/mathmlelement/style/index.md | 1 + .../api/svgelement/attributestylemap/index.md | 77 +++++++++++++++++++ files/en-us/web/api/svgelement/index.md | 2 +- files/en-us/web/api/svgelement/style/index.md | 1 + 6 files changed, 156 insertions(+), 3 deletions(-) create mode 100644 files/en-us/web/api/mathmlelement/attributestylemap/index.md create mode 100644 files/en-us/web/api/svgelement/attributestylemap/index.md diff --git a/files/en-us/web/api/htmlelement/attributestylemap/index.md b/files/en-us/web/api/htmlelement/attributestylemap/index.md index debf1812a7f2940..b7981b3ffce13b9 100644 --- a/files/en-us/web/api/htmlelement/attributestylemap/index.md +++ b/files/en-us/web/api/htmlelement/attributestylemap/index.md @@ -8,7 +8,7 @@ browser-compat: api.HTMLElement.attributeStyleMap {{APIRef("CSSOM")}} -The **`attributeStyleMap`** read-only property of the {{domxref("HTMLElement")}} interface returns a live {{domxref("StylePropertyMap")}} object that contains a list of style properties of the element that are defined in the element's inline [`style`](/en-US/docs/Web/HTML/Global_attributes/style) attribute, or assigned using the {{domxref("HTMLElement.style", "style")}} property of the {{domxref("HTMLElement")}} interface via script. +The **`attributeStyleMap`** read-only property of the {{domxref("HTMLElement")}} interface returns a live {{domxref("StylePropertyMap")}} object that contains a list of style properties of the element that are defined in the element's inline `style` attribute, or assigned using the {{domxref("HTMLElement.style", "style")}} property of the {{domxref("HTMLElement")}} interface via script. Shorthand properties are expanded. If you set `border-top: 1px solid black`, the longhand properties ({{cssxref("border-top-color")}}, {{cssxref("border-top-style")}}, and {{cssxref("border-top-width")}}) are set instead. @@ -22,7 +22,7 @@ A live {{domxref("StylePropertyMap")}} object. ## Examples -The following code snippet shows the relationship between HTML `style` attribute and `attributeStyleMap` property: +The following code snippet shows the relationship between the `style` attribute and the `attributeStyleMap` property: ```html
@@ -61,3 +61,5 @@ for (const property of element.attributeStyleMap) { ## See also - {{domxref("HTMLElement.style")}} +- {{domxref("SVGElement.attributeStyleMap")}} +- {{domxref("MathMLElement.attributeStyleMap")}} diff --git a/files/en-us/web/api/mathmlelement/attributestylemap/index.md b/files/en-us/web/api/mathmlelement/attributestylemap/index.md new file mode 100644 index 000000000000000..f5d81127adf3f17 --- /dev/null +++ b/files/en-us/web/api/mathmlelement/attributestylemap/index.md @@ -0,0 +1,72 @@ +--- +title: "MathMLElement: attributeStyleMap property" +short-title: attributeStyleMap +slug: Web/API/MathMLElement/attributeStyleMap +page-type: web-api-instance-property +browser-compat: api.MathMLElement.attributeStyleMap +--- + +{{APIRef("CSSOM")}} + +The **`attributeStyleMap`** read-only property of the {{domxref("MathMLElement")}} interface returns a live {{domxref("StylePropertyMap")}} object that contains a list of style properties of the element that are defined in the element's inline `style` attribute, or assigned using the {{domxref("MathMLElement.style", "style")}} property of the {{domxref("MathMLElement")}} interface via script. + +Shorthand properties are expanded. If you set `border-top: 1px solid black`, the longhand properties ({{cssxref("border-top-color")}}, {{cssxref("border-top-style")}}, and {{cssxref("border-top-width")}}) are set instead. + +The main difference between {{domxref("MathMLElement.style", "style")}} property and `attributeStyleMap` property is that, the `style` property will return a {{domxref("CSSStyleDeclaration")}} object, while the `attributeStyleMap` property will return a {{domxref("StylePropertyMap")}} object. + +Though the property itself is not writable, you could read and write inline styles through the {{domxref("StylePropertyMap")}} object that it returns, just like through the {{domxref("CSSStyleDeclaration")}} object that returns via the `style` property. + +## Value + +A live {{domxref("StylePropertyMap")}} object. + +## Examples + +The following code snippet shows the relationship between the `style` attribute and the `attributeStyleMap` property: + +```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 + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("MathMLElement.style")}} +- {{domxref("HTMLElement.attributeStyleMap")}} +- {{domxref("SVGElement.attributeStyleMap")}} diff --git a/files/en-us/web/api/mathmlelement/style/index.md b/files/en-us/web/api/mathmlelement/style/index.md index 30db023ba8ebf0c..00db7b99ede0ff5 100644 --- a/files/en-us/web/api/mathmlelement/style/index.md +++ b/files/en-us/web/api/mathmlelement/style/index.md @@ -85,3 +85,4 @@ for (const prop in elementStyle) { - [Using dynamic styling information](/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information) - {{domxref("HTMLElement.style")}} - {{domxref("SVGElement.style")}} +- {{domxref("MathMLElement.attributeStyleMap")}} diff --git a/files/en-us/web/api/svgelement/attributestylemap/index.md b/files/en-us/web/api/svgelement/attributestylemap/index.md new file mode 100644 index 000000000000000..358383f94e0c4a8 --- /dev/null +++ b/files/en-us/web/api/svgelement/attributestylemap/index.md @@ -0,0 +1,77 @@ +--- +title: "SVGElement: attributeStyleMap property" +short-title: attributeStyleMap +slug: Web/API/SVGElement/attributeStyleMap +page-type: web-api-instance-property +browser-compat: api.SVGElement.attributeStyleMap +--- + +{{APIRef("CSSOM")}} + +The **`attributeStyleMap`** read-only property of the {{domxref("SVGElement")}} interface returns a live {{domxref("StylePropertyMap")}} object that contains a list of style properties of the element that are defined in the element's inline `style` attribute, or assigned using the {{domxref("SVGElement.style", "style")}} property of the {{domxref("SVGElement")}} interface via script. + +Shorthand properties are expanded. If you set `border-top: 1px solid black`, the longhand properties ({{cssxref("border-top-color")}}, {{cssxref("border-top-style")}}, and {{cssxref("border-top-width")}}) are set instead. + +The main difference between {{domxref("SVGElement.style", "style")}} property and `attributeStyleMap` property is that, the `style` property will return a {{domxref("CSSStyleDeclaration")}} object, while the `attributeStyleMap` property will return a {{domxref("StylePropertyMap")}} object. + +Though the property itself is not writable, you could read and write inline styles through the {{domxref("StylePropertyMap")}} object that it returns, just like through the {{domxref("CSSStyleDeclaration")}} object that returns via the `style` property. + +## Value + +A live {{domxref("StylePropertyMap")}} object. + +## Examples + +The following code snippet shows the relationship between the `style` attribute and the `attributeStyleMap` property: + +```html +
+ + + +
+
+``` + +```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 + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGElement.style")}} +- {{domxref("HTMLElement.attributeStyleMap")}} +- {{domxref("MathMLElement.attributeStyleMap")}} diff --git a/files/en-us/web/api/svgelement/index.md b/files/en-us/web/api/svgelement/index.md index bdfc2ae3a35ac28..c764a6508e9fb74 100644 --- a/files/en-us/web/api/svgelement/index.md +++ b/files/en-us/web/api/svgelement/index.md @@ -17,7 +17,7 @@ _Also inherits properties from the {{DOMxRef("Element")}} interface._ - {{DOMxRef("SVGElement.attributeStyleMap")}} {{ReadOnlyInline}} - : A {{DOMxRef("StylePropertyMap")}} representing the declarations of the element's {{SVGAttr("style")}} attribute. -- {{DOMxRef("HTMLElement.dataset")}} {{ReadOnlyInline}} +- {{DOMxRef("SVGElement.dataset")}} {{ReadOnlyInline}} - : A {{DOMxRef("DOMStringMap")}} object which provides a list of key/value pairs of named data attributes which correspond to [custom data attributes](/en-US/docs/Learn/HTML/Howto/Use_data_attributes) attached to the element. These can also be defined in SVG using attributes of the form {{SVGAttr("data-*")}}, where `*` is the key name for the pair. This works just like HTML's {{DOMxRef("HTMLElement.dataset")}} property and HTML's [`data-*`](/en-US/docs/Web/HTML/Global_attributes/data-*) global attribute. - {{DOMxRef("SVGElement.className")}} {{Deprecated_Inline}} {{ReadOnlyInline}} - : An {{DOMxRef("SVGAnimatedString")}} that reflects the value of the {{SVGAttr("class")}} attribute on the given element, or the empty string if `class` is not present. This attribute is deprecated and may be removed in a future version of this specification. Authors are advised to use {{DOMxRef("Element.classList")}} instead. diff --git a/files/en-us/web/api/svgelement/style/index.md b/files/en-us/web/api/svgelement/style/index.md index d705927215c4ffc..8ba0710dcbe80ec 100644 --- a/files/en-us/web/api/svgelement/style/index.md +++ b/files/en-us/web/api/svgelement/style/index.md @@ -89,3 +89,4 @@ for (const prop in elementStyle) { - [Using dynamic styling information](/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information) - {{domxref("HTMLElement.style")}} - {{domxref("MathMLElement.style")}} +- {{domxref("SVGElement.attributeStyleMap")}}