Element.computedStyleMap()

Experimental: 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 (en-US) 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 (en-US).

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

BCD tables only load in the browser