From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../es/web/api/element/computedstylemap/index.html | 99 ++++++++++++++++++++++ 1 file changed, 99 insertions(+) create mode 100644 files/es/web/api/element/computedstylemap/index.html (limited to 'files/es/web/api/element/computedstylemap/index.html') diff --git a/files/es/web/api/element/computedstylemap/index.html b/files/es/web/api/element/computedstylemap/index.html new file mode 100644 index 0000000000..656312b1f5 --- /dev/null +++ b/files/es/web/api/element/computedstylemap/index.html @@ -0,0 +1,99 @@ +--- +title: Element.computedStyleMap() +slug: Web/API/Element/computedStyleMap +tags: + - API + - CSS Typed Object Model API + - Element + - Experimental + - Houdini + - Method + - Reference + - StylePropertyMapReadOnly + - computedStyleMap() +translation_of: Web/API/Element/computedStyleMap +--- +

{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}}

+ +

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

+ +

Sintaxis

+ +
var stylePropertyMapReadOnly = Element.computedStyleMap()
+ +

Parámetros

+ +

Ninguno.

+ +

Valor de resultado

+ +

Una interfaz {{domxref("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.

+ +

{{EmbedLiveSample("Examples", 300, 300)}}

+ +

¿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ónEstadoComentario
{{SpecName('CSS Typed OM','#dom-element-computedstylemap','computedStyleMap()')}}{{Spec2('CSS Typed OM')}}Definición inicial.
+ +

Compatibilidad con navedadores

+ + + +

{{Compat("api.Element.computedStyleMap")}}

-- cgit v1.2.3-54-g00ecf