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