Element.computedStyleMap()

Traducción en progreso.

Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

El método computedStyleMap() de la interfaz Element devuelve una interfaz StylePropertyMapReadOnly que provee una representación de solo-lectura de un bloque de declaración de CSS que es una alternativa a CSSStyleDeclaration.

Sintaxis

var stylePropertyMapReadOnly = Element.computedStyleMap()

Parámetros

Ninguno.

Valor de resultado

Una interfaz StylePropertyMapReadOnly.

Ejemplos

Comenzamos con algo de HTML simple: un párrafo con un enlace, y una lista de definición a la cual le añadiremos todos los pares de Propiedad CSS / Valor.

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

Añadimos un poco de CSS

a {
  --colour: red;
  color: var(--colour);
}

Añadimos Javascript para tomar nuestro enlace y devolvemos una lista de definición de todos los valores de propiedades CSS usando computedStyleMap().

// obtenemos el elemento
const myElement = document.querySelector('a');

// obtenemos la <dl> que llenaremos
const stylesList = document.querySelector('#regurgitation');

// recuperamos todos los estilos calculados con computedStyleMap()
const allComputedStyles = myElement.computedStyleMap();

// iteramos a través del mapa de todas las propiedades y valores, añadiendo un <dt> y <dd> para cada mapa
for (const [prop, val] of allComputedStyles) {
	// propiedades
	const cssProperty = document.createElement('dt');
	cssProperty.appendChild(document.createTextNode(prop));
	stylesList.appendChild(cssProperty);

	// valores
	const cssValue = document.createElement('dd');
	cssValue.appendChild(document.createTextNode(val));
	stylesList.appendChild(cssValue);
}

En navegadores que soportan computedStyleMap(), verás una lista de todas las propiedades CSS y valores. En otros navegadores verás un enlace.

¿Te diste cuenta cuántas propiedades CSS por defecto tenía un enlace? Actualiza el 'a' a un 'p', y notarás una diferencia en los valores calculados por defecto del margin-top y margin-bottom.

Especificaciones

Especificación Estado Comentario
CSS Typed OM Level 1
La definición de 'computedStyleMap()' en esta especificación.
Working Draft Definición inicial.

Compatibilidad con navedadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
computedStyleMap
Experimental
Chrome Soporte completo 66Edge Soporte completo 79Firefox Sin soporte NoIE Sin soporte NoOpera Soporte completo 53Safari Sin soporte NoWebView Android Soporte completo 66Chrome Android Soporte completo 66Firefox Android Sin soporte NoOpera Android Soporte completo 47Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 9.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.