StylePropertyMapReadOnly: get() method

Limited availability

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

Theget() method of theStylePropertyMapReadOnly interface returns aCSSStyleValueobject for the first value of the specified property.

Syntax

get(property)

Parameters

property: The name of the property to retrieve the value of.

Let's get just a few properties and values. Let's start by creating a link inside aparagraph in our HTML, and adding a definition list which we will populate with#"https://example.com">Link</a></p><dl></dl>

We add a bit of CSS, including a custom property and an inheritable property:

css

p {  font-weight: bold;}a {  --color: red;  color: var(--color);}

We use the Element'scomputedStyleMap()to return aStylePropertyMapReadOnly object. We create an array of propertiesof interest and use the StylePropertyMapReadOnly'sget() method to get onlythose values.

// get the elementconst myElement = document.querySelector("a");// Retrieve all computed styles with computedStyleMap()const styleMap = myElement.computedStyleMap();// get the <dl> we'll be populatingconst stylesList = document.querySelector("#results");// array of properties we're interested inconst ofInterest = ["font-weight", "border-left-color", "color", "--color"];// iterate over our properties of interestfor (const property of ofInterest) {  // properties  const cssProperty = document.createElement("dt");  cssProperty.innerText = property;  stylesList.appendChild(cssProperty);  // values  const cssValue = document.createElement("dd");  // use get() to find the value  cssValue.innerText = styleMap.get(property);  stylesList.appendChild(cssValue);}