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

js

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.

html

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

Añadimos un poco de CSS

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().

js

// 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

Specification
CSS Typed OM Level 1
# dom-element-computedstylemap

Compatibilidad con navegadores

BCD tables only load in the browser