HTMLElement: attributeStyleMap property

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

TheattributeStyleMap read-only property of theHTMLElement interface returns a liveStylePropertyMap object that contains a list of style properties of the element that are defined in the element's inlinestyle attribute, or assigned using thestyle property of theHTMLElement interface via script.

Shorthand properties are expanded. If you setborder-top: 1px solid black, the longhand properties (border-top-color,border-top-style, andborder-top-width) are set instead.

The main difference betweenstyle property andattributeStyleMap property is that, thestyle property will return aCSSStyleDeclaration object, while theattributeStyleMap property will return aStylePropertyMap object.

Though the property itself is not writable, you could read and write inline styles through theStylePropertyMap object that it returns, just like through theCSSStyleDeclaration object that returns via thestyle property.

Value

A liveStylePropertyMap object.

Examples

The following code snippet shows the relationship between thestyle attribute and theattributeStyleMap property:

html

<div>  An example element</div><div></div>

css

#el {  font-size: 16px;}#output {  white-space: pre-line;}

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