StylePropertyMapReadOnly

Want more browser support for this feature? Tell us why.

Experimental:

StylePropertyMapReadOnly CSS API CSSStyleDeclaration CSS Element.computedStyleMap()

StylePropertyMapReadOnly.size: StylePropertyMapReadOnly

StylePropertyMapReadOnly.entries(): [key, value] for...in for-in
StylePropertyMapReadOnly.forEach(): StylePropertyMapReadOnly 1
StylePropertyMapReadOnly.get()
StylePropertyMapReadOnly.getAll(): CSSStyleValue
StylePropertyMapReadOnly.has(): StylePropertyMapReadOnly
StylePropertyMapReadOnly.keys(): StylePropertyMapReadOnly
StylePropertyMapReadOnly.values(): StylePropertyMapReadOnly

html

<p>
   CSS
  
  CSS 
</p>
<dl id="output"></dl>

CSS

css

p {
  --someVariable: 1.6em;
  --someOtherVariable: translateX(33vw);
  --anotherVariable: 42;
  line-height: var(--someVariable);
}

JavaScript Element.computedStyleMap() CSS

// 
const myElement = document.querySelector("p");

//  <dl> 
const stylesList = document.querySelector("#output");

// computedStyleMap() 
const stylePropertyMap = myElement.computedStyleMap();

//  <dt>  <dd> 
for (const [prop, val] of stylePropertyMap) {
  // 
  const cssProperty = document.createElement("dt");
  cssProperty.innerText = prop;
  stylesList.appendChild(cssProperty);

  // 
  const cssValue = document.createElement("dd");
  cssValue.innerText = val;
  stylesList.appendChild(cssValue);
}


CSS Typed OM Level 1 # stylepropertymapreadonly

MDN

MDN 20241217

GitHub