Valor calculado de los estilos

Problema:

Se trata de poder consultar el valor de un estilo determinado de cualquier objeto.

Los estilos (CSS styles) son básicos para mostrar una página web y hacerlas más legibles y útiles.

Muchos estilos son calculados por el navegador o provienen de una clase definida en la sección head o desde un archivo externo.

¿Como podemos conocer el valor de un estilo de un elemento html de nuestra página web?

Solución

El objeto window posee un método para leer cualquier valor CSS, getComputedStyle()

Los estilos pueden leerse usando el obejto global window, es el método getComputedStyle().

Este método usa dos argumentos, pero el que nos interesa es el primero: el objeto del DOM que queramos consultar. El segundo es para pseudo elementos (:after, :before).

El método devuelve un objeto con todos los estilos del elemento. Se puede consultar directamente o usando el método getPropertyValue() con el nombre de la propiead como argumento (backgroundColor, width, etc)

Ejemplo

<style>

.caja{

color:red;

border: 2px solid blue;

width:200px;

}

</style>

<body>

<div class="caja" id="ejm">Ejemplo de texto</div>

<script>

let obj = document.getElementById('ejm');

let estilos = window.getComputedStyle(obj);

let ancho = estilos.getPropertyValue('width');

console.log(ancho);

console.log(estilos.color)

}

</script>

</body>

Este sencilo ejemplo muestra como aplciar esta técnica. Como ves el valor se puede leer con getPropertyValue() o directamente.

scripts