JavaScript Element computedStyleMap() Method

What You’ll Learn

Element.computedStyleMap() is an instance method from the CSS Typed OM API. It returns a StylePropertyMapReadOnly of computed styles as typed values. Learn how it differs from getComputedStyle(), how to read properties with .get(), and five try-it labs. Support is Limited availability (not Baseline yet).

Introduction

For years, window.getComputedStyle(el) was the go-to way to read final CSS on an element. It returns a CSSStyleDeclaration full of strings —often resolved to pixels after layout.

computedStyleMap() is the Typed OM alternative. It returns a read-only map whose values are structured CSS objects. That makes it easier to process colors, lengths, and percentages programmatically—and it exposes computed values, which can differ from the resolved values getComputedStyle() returns.

This page is part of JavaScript Element. Related topics include closest() and Window (home of getComputedStyle).

Understanding the computedStyleMap() Method

Calling el.computedStyleMap() takes no parameters and gives you a StylePropertyMapReadOnly—a map-like collection you can iterate or query with .get(propertyName).

• It is an instance method on Element.
• Returns computed values as CSS Typed OM objects, not strings.
• Unlike getComputedStyle(), values are usually computed, not resolved.
• For width: 50%, computed may stay 50% while resolved becomes pixels.
• The map is read-only—you cannot set styles through it.
• Part of the CSS Typed OM Level 1 specification.

📝 Syntax

General form of Element.computedStyleMap (MDN):

computedStyleMap()

Parameters

None.

Return value

A StylePropertyMapReadOnly object containing computed CSS property/value pairs as typed values.

Common patterns

const el = document.querySelector(".item");

if (typeof el.computedStyleMap !== "function") {
  console.log("computedStyleMap not supported");
} else {
  const map = el.computedStyleMap();

  // Read one property
  const color = map.get("color");
  console.log(String(color));

  // Iterate all entries
  for (const [prop, val] of map) {
    console.log(prop, String(val));
  }
}

Examples Gallery

Examples follow MDN Element.computedStyleMap() patterns. Use View Output or Try It Yourself for each case.

const el = document.querySelector(".item");
const supported = typeof el.computedStyleMap === "function";

if (!supported) {
  console.log("not supported");
} else {
  const map = el.computedStyleMap();
  console.log("property count:", [...map].length);
}

property count: (many — browser-dependent)

const item = document.querySelector(".item");
const map = item.computedStyleMap();

console.log(String(map.get("height")));
// e.g. "100px" (typed value coerced to string)

100px

const link = document.querySelector("a");
const map = link.computedStyleMap();
const sample = [];

for (const [prop, val] of map) {
  if (sample.length < 3) sample.push(`${prop}: ${String(val)}`);
}

console.log(sample.join("\n"));
// color: rgb(255, 0, 0)
// cursor: pointer
// …

color: rgb(255, 0, 0)
cursor: pointer
display: inline
…

const item = document.querySelector(".item");
const resolved = getComputedStyle(item);
const computed = item.computedStyleMap();

console.log("resolved width:", resolved.width);
// "100px" (after layout)

console.log("computed width:", String(computed.get("width")));
// "50%" (computed value)

resolved width: 100px
computed width: 50%

const item = document.querySelector(".item");
const resolved = getComputedStyle(item);
const computed = item.computedStyleMap();

console.log("resolved:", resolved.backgroundColor);
console.log("computed:", String(computed.get("background-color")));
// both resolve to rgb — format may differ slightly

resolved: rgb(255, 99, 71)
computed: rgb(255, 99, 71)

🚀 Common Use Cases

• Reading percentage-based widths before layout resolves them to pixels.
• Building devtools or style inspectors with structured CSS data.
• Animation or layout code that needs typed length/color objects.
• Comparing user-agent default styles across elements (link vs paragraph).
• Teaching the difference between computed and resolved CSS values.
• Gradual migration from string-based getComputedStyle in Chromium-first apps.

📝 Notes

• MDN: Limited availability (not Baseline)—not Deprecated, Experimental, or Non-standard.
• Always feature-detect; keep getComputedStyle() as a fallback.
• Computed values ≠ resolved values for some layout properties (MDN).
• Values are objects—coerce to string for logging, use Typed OM APIs for math.
• Specified in CSS Typed OM Level 1.
• Related: closest(), checkVisibility(), Window, JavaScript hub.

💡 Best Practices