您正位於 MDN Web Docs 的可編輯版本

以 MDN Web Docs 使用者身分檢視: https://developer.mozilla.org/zh-TW/docs/Web/API/StylePropertyMapReadOnly

StylePropertyMapReadOnly

我們的志工尚未將本文翻譯為 正體中文 (繁體) 版本。加入我們,幫忙翻譯!
您也可以閱讀本文的 English (US) 版本。

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

The StylePropertyMapReadOnly interface of the the CSS Typed Object Model API provides a read-only representation of a CSS declaration block that is an alternative to CSSStyleDeclaration. Retrieve an instance of this interface using Element.computedStyleMap().

Properties

StylePropertyMapReadOnly.size
Returns an unsinged long integer containing the size of the StylePropertyMapReadOnly object.

Methods

StylePropertyMapReadOnly.entries()
Returns an array of a given object's own enumerable property [key, value] pairs, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
StylePropertyMapReadOnly.forEach()
Executes a provided function once for each element of StylePropertyMapReadOnly.
StylePropertyMapReadOnly.get()
Returns the value of the specified property.
StylePropertyMapReadOnly.getAll()
Returns an array of CSSStyleValue objects containing the values for the provided property.
StylePropertyMapReadOnly.has()
Indicates whether the specified property is in the StylePropertyMapReadOnly object.
StylePropertyMapReadOnly.keys()
Returns a new Array Iterator containing the keys for each item in StylePropertyMapReadOnly.
StylePropertyMapReadOnly.values()
Returns a new Array Iterator containing the values for each index in the StylePropertyMapReadOnly object.

Examples

We have to have an element to observe:

<p>
   This is a paragraph with some text. We can add some CSS, or not. The 
   style map will include all the default and inherted CSS property values.
</p>
<dl id="output"></dl>

We add a touch of CSS with a custom property to better demonstrate the output:

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

We add JavaScript to grab our paragraph and return back a definition list of all the default CSS property values using computedStyleMap().

// get the element
const myElement = document.querySelector('p');

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

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

// iterate thru the map of all the properties and values, adding a <dt> and <dd> for each
for (const [prop, val] of stylePropertyMap) {
	// 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);
}

Specifications

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
StylePropertyMapReadOnly
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
entries
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
forEach
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
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
getAll
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
has
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
keys
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
size
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
values
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
@@iterator
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.

文件標籤與貢獻者

此頁面的貢獻者: estelle, mdnwebdocs-bot, jpmedley
最近更新: estelle,