The Element.computedStyleMap() method returns a StylePropertyMapReadOnly — a read-only map of the element’s computed CSS as CSS Typed OM values (MDN). It is an alternative to getComputedStyle(), which returns resolved string values.
Pass the required arguments shown below. Check return values and browser support before you rely on the result.
Call el.computedStyleMap. Start with this line.
el.computedStyleMap()| Call | What it does |
|---|---|
el.computedStyleMap() | Primary signature. |
el.computedStyleMap(...) | Call with the arguments your case needs. |
Built into the browser. Call computedStyleMap(...) on an Element — no import required.
el.computedStyleMap()This member has no parameters beyond those shown in the signature.
| Return Value | Description |
|---|---|
| * | StylePropertyMapReadOnly |
Get a typed computed value with map.get().
const el = document.getElementById("box");
const out = document.getElementById("out");
const map = el.computedStyleMap();
out.textContent = String(map.get("color"));computedStyleMap() returns Typed OM values."color", not "Color".String(...) turns the typed value into text.getComputedStyle()For percentage widths, resolved and computed values can differ (MDN).
const item = document.getElementById("item");
const out = document.getElementById("out");
const resolved = getComputedStyle(item).width;
const computed = item.computedStyleMap().get("width");
out.textContent =
"resolved: " + resolved + "\n" +
"computed: " + String(computed);width: 50%. Parent width makes layout resolve to pixels.getComputedStyle often returns 100px.50%.Support is Limited availability — always guard the call.
const el = document.getElementById("box");
const out = document.getElementById("out");
if (typeof el.computedStyleMap !== "function") {
out.textContent = "fallback: " + getComputedStyle(el).color;
} else {
const map = el.computedStyleMap();
out.textContent = "typed: " + String(map.get("color"));
}typeof … === "function" is enough.getComputedStyle works almost everywhere.Element.computedStyleMap() is Limited availability on MDN (not Baseline). Chromium engines have long supported it; Safari from 16.4+; Firefox support is recent. Feature-detect and fall back to getComputedStyle().
CSS Typed OM computed styles — use getComputedStyle() as a portable fallback.
Bottom line: Detect typeof el.computedStyleMap === "function". Prefer Typed OM when you need computed (not resolved) values; otherwise getComputedStyle() is the safe default.
List CSS and WAAPI animations attached to an element.
18 people found this page helpful