Ventana getComputedStyle()
Ejemplo
Obtenga el color de fondo calculado de un elemento:
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");
Más ejemplos a continuación.
Definición y uso
El getComputedStyle()
método obtiene las propiedades y los valores CSS calculados de un elemento HTML.
El getComputedStyle()
método devuelve un
CSSStyleDeclaration object
.
Estilo calculado
El estilo calculado es el estilo utilizado en el elemento después de que se hayan aplicado todas las fuentes de estilo.
Fuentes de estilo: hojas de estilo externas e internas, estilos heredados y estilos predeterminados del navegador.
Ver también:
Sintaxis
window.getComputedStyle(element, pseudoElement)
Parámetros
Parameter | Description |
element | Required. The element to get the computed style for. |
pseudoElement | Optional. A pseudo-element to get. |
Valor devuelto
Escribe | Descripción |
Un objeto | Un objeto CSSStyleDeclaration con todas las propiedades y valores CSS del elemento. |
Más ejemplos
Obtenga todos los estilos calculados de un elemento:
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let text = "";
for (x in cssObj) {
cssObjProp = cssObj.item(x)
text += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}
Obtenga el tamaño de fuente calculado de la primera letra en un elemento (usando pseudo-elemento):
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");
Compatibilidad con navegador
getComputedStyle()
es compatible con todos los navegadores:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |