StylePropertyMapReadOnly: get() method

Limited availability

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

The get() method of the StylePropertyMapReadOnly interface returns a CSSStyleValue object for the first value of the specified property.

Syntax

js
get(property)

Parameters

property

The name of the property to retrieve the value of.

Return value

A CSSStyleValue object.

Examples

Let's get just a few properties and values. Let's start by creating a link inside a paragraph in our HTML, and adding a definition list which we will populate with JavaScript:

html
<p>
  <a href="https://example.com">Link</a>
</p>
<dl id="results"></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's computedStyleMap() to return a StylePropertyMapReadOnly object. We create an array of properties of interest and use the StylePropertyMapReadOnly's get() method to get only those values.

js
// get the element
const myElement = document.querySelector("a");

// Retrieve all computed styles with computedStyleMap()
const styleMap = myElement.computedStyleMap();

// get the <dl> we'll be populating
const stylesList = document.querySelector("#results");

// array of properties we're interested in
const ofInterest = ["font-weight", "border-left-color", "color", "--color"];

// iterate over our properties of interest
for (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);
}

Specifications

Specification
CSS Typed OM Level 1
# dom-stylepropertymapreadonly-get

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
get

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

See also