Element.computedStyleMap()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
computedStyleMap

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.