StylePropertyMapReadOnly

Limited availability

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

TheStylePropertyMapReadOnly interface of theCSS Typed Object Model API provides a read-only representation of a CSS declaration block that is an alternative toCSSStyleDeclaration. Retrieve an instance of this interface usingElement.computedStyleMap().

Instance properties

StylePropertyMapReadOnly.size: Returns an unsigned long integer containing the size of theStylePropertyMapReadOnly object.

Instance methods

StylePropertyMapReadOnly.entries(): Returns an array of a given object's own enumerable property[key, value] pairs, in the same order as that provided by afor...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
StylePropertyMapReadOnly.forEach(): Executes a provided function once for each element ofStylePropertyMapReadOnly.
StylePropertyMapReadOnly.get(): Returns the value of the specified property.
StylePropertyMapReadOnly.getAll(): Returns an array ofCSSStyleValue objects containing the values for the provided property.
StylePropertyMapReadOnly.has(): Indicates whether the specified property is in theStylePropertyMapReadOnly object.
StylePropertyMapReadOnly.keys(): Returns a newarray iterator containing the keys for each item inStylePropertyMapReadOnly.
StylePropertyMapReadOnly.values(): Returns a newarray iterator containing the values for each index in theStylePropertyMapReadOnly object.

Examples

We have to have an element to observe:

html

<p>  This is a paragraph with some text. We can add some CSS, or not. The style map  will include all the default and inherited CSS property values.</p><dl></dl>

We add a touch of CSS with a custom property to better demonstrate the output:

css

p {  --some-variable: 1.6em;  --some-other-variable: translateX(33vw);  --another-variable: 42;  line-height: var(--some-variable);}

We add JavaScript to grab our paragraph and return back a definition list of all the default CSS property values usingElement.computedStyleMap().

// get the elementconst myElement = document.querySelector("p");// get the <dl> we'll be populatingconst stylesList = document.querySelector("#output");// Retrieve all computed styles with computedStyleMap()const stylePropertyMap = myElement.computedStyleMap();// iterate through the map of all the properties and values, adding a <dt> and <dd> for eachfor (const [prop, val] of stylePropertyMap) {  // properties  const cssProperty = document.createElement("dt");  cssProperty.innerText = prop;  stylesList.appendChild(cssProperty);  // values  const cssValue = document.createElement("dd");  cssValue.innerText = val;  stylesList.appendChild(cssValue);}