Método Window getComputedStyle()

Definición y uso

getComputedStyle() El método obtiene las propiedades y valores CSS calculados del elemento HTML.

getComputedStyle() El método devuelve un objeto CSSStyleDeclaration.

Estilos calculados

Los estilos calculados se refieren a los estilos aplicados al elemento después de que se han aplicado todos los orígenes de estilos.

Origen de los estilos: hojas de estilo externas e internas, estilos heredados y estilos predeterminados del navegador.

Véase también:

Objeto CSSStyleDeclaration

Ejemplo

Ejemplo 1

Obtener el color de fondo calculado del elemento:

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");

Prueba por tu cuenta

Ejemplo 2

Obtener todos los estilos calculados del 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>";
}

Prueba por tu cuenta

Ejemplo 3

Obtener el tamaño de fuente calculado de la primera letra del elemento (usando pseudoelemento):

const element = document.getElementById("test"); const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");

Prueba por tu cuenta

Sintaxis

window.getComputedStyle(element, pseudoElement)

Parámetros

Parámetros Descripción
element Obligatorio. El elemento para el que se desea obtener los estilos calculados.
pseudoElement Opcional. El pseudoelemento que se desea obtener.

Valor devuelto

Tipo Descripción
Objeto Objeto CSSStyleDeclaration que posee todas las propiedades y valores CSS del elemento.

Diferencias entre el método getComputedStyle() y la propiedad style

Comparar el método getComputedStyle() con la propiedad style del HTMLElement: la última solo permite acceder a los estilos en línea del elemento, permite cualquier unidad especificada y, no puede proporcionar información alguna sobre los estilos aplicados a la tabla de estilos del elemento.

Compatibilidad del navegador

Todos los navegadores lo admiten getComputedStyle():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte 9-11 Soporte Soporte Soporte Soporte