Element: computedStyleMap() method

Limited availability

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

ThecomputedStyleMap() method oftheElement interface returns aStylePropertyMapReadOnlyinterface which provides a read-only representation of a CSS declaration block that isan alternative toCSSStyleDeclaration.

Syntax

computedStyleMap()

Parameters

None.

Return value

AStylePropertyMapReadOnly object.

UnlikeWindow.getComputedStyle, the return value containscomputed values, notresolved values. For most properties, they are the same, except a few layout-related properties, where the resolved value is theused value instead of the computed value. See thecomparison withgetComputedStyle() example for details.

Examples

Getting default styles

We start with some simple HTML: a paragraph with a link, and a definition list to whichwe will add all the CSS Property / Value pairs.

html

<p>  <a href="https://example.com">Link</a></p><dl></dl>

We add a little bit of CSS

css

a {  --color: red;  color: var(--color);}

We add JavaScript to grab our link and return back a definition list of all the CSSproperty values usingcomputedStyleMap().

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

Inbrowsers that supportcomputedStyleMap(),you'll see a list of all the CSS properties and values.In other browsers you'll just see a link.

Did you realize how many default CSS properties a link had? Update thedocument.querySelector("a")todocument.querySelector("p"), and you'll notice a difference in themargin-topandmargin-bottom default computed values.

Comparison with getComputedStyle()

Window.getComputedStyle() returnsresolved values, whilecomputedStyleMap() returnscomputed values. These are usually the same, but for some properties, the resolved value is theused value instead of the computed value. For example, percentage values for widths are resolved to pixel valuespost-layout, so the used values are in pixels, while the computed values are still in percentages.

Note that the way we present it makes the two APIs seem more similar than they are.computedStyleMap() containsCSS Typed OM objects, whilegetComputedStyle() contains strings. The former presents the same information in a more structured and processable way.

In this example, thewidth property is specified as a percentage, so the computed value is given as a percentage, but the resolved value is given in pixels. Theheight is always in pixels. Thebackground-color is a named color, but it is computed to an RGB value.

html

<div>  <div></div></div><pre></pre>

css

.container {  width: 200px;  height: 200px;}.item {  width: 50%;  height: 100px;  background-color: tomato;}

const item = document.querySelector(".item");const result = document.querySelector("#result");const resolvedValues = getComputedStyle(item);const computedValues = item.computedStyleMap();result.textContent = `resolvedValues.width = ${resolvedValues.width}computedValues.get("width") = ${computedValues.get("width")}resolvedValues.height = ${resolvedValues.height}computedValues.get("height") = ${computedValues.get("height")}resolvedValues.backgroundColor = ${resolvedValues.backgroundColor}computedValues.get("background-color") = ${computedValues.get(  "background-color",)}`;