StylePropertyMapReadOnly.get()

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

Syntax

var declarationBlock = StylePropertyMapReadOnly.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:

<p>
   <a href="https://example.com">Link</a>
</p>
<dl id="regurgitation"></dl>

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

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

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.

// 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 styleMap = myElement.computedStyleMap();

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

// iterate thru our properties of interest
for ( let i = 0; i < ofInterest.length; i++ ) {
  	// properties
  const cssProperty = document.createElement('dt');
  cssProperty.appendChild(document.createTextNode(ofInterest[i]));
  stylesList.appendChild(cssProperty);
  	// values
  const cssValue = document.createElement('dd');
  cssValue.appendChild(document.createTextNode( styleMap.get(ofInterest[i])));
  stylesList.appendChild(cssValue);
}

Specifications

Specification Status Comment
CSS Typed OM Level 1
The definition of 'get()' in that specification.
Working Draft Initial definition.

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
get
Experimental
Chrome Full support 66Edge Full support 79Firefox No support NoIE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung 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.

See Also