This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The computedStyleMap()
method of the Element
interface returns a StylePropertyMapReadOnly
interface which provides a read-only representation of a CSS declaration block that is an alternative to CSSStyleDeclaration
.
Syntax
var stylePropertyMapReadOnly = Element.computedStyleMap()
Parameters
None.
Return value
A StylePropertyMapReadOnly
interface.
Examples
We start with some simple HTML: a paragraph with a link, and a definition list to which we will add all the CSS Property / Value pairs.
<p> <a href="https://example.com">Link</a> </p> <dl id="regurgitation"></dl>
We add a little bit of CSS
a { --colour: red; color: var(--colour); }
We add JavaScript to grab our link and return back a definition list of all the CSS property values using computedStyleMap().
// get the element const myElement = document.querySelector('a'); // get the <dl> we'll be populating const stylesList = document.querySelector('#regurgitation'); // Retrieve all computed styles with computedStyleMap() const allComputedStyles = myElement.computedStyleMap(); // iterate thru the map of all the properties and values, adding a <dt> and <dd> for each for (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); }
In browsers that support computedStyleMap()
, 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 the 'a
' to the 'p
', and you'll notice a difference in the margin-top
and margin-bottom
default computed values.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Typed OM Level 1 The definition of 'computedStyleMap()' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
computedStyleMap | Chrome Full support 66 | Edge Full support 79 | Firefox No support No | IE No support No | Opera Full support 53 | Safari No support No | WebView Android Full support 66 | Chrome Android Full support 66 | Firefox Android No support No | Opera Android Full support 47 | Safari iOS No support No | Samsung Internet Android Full support 9.0 |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.