Lectura de propiedades desde archivos CSS en JavaScript

Las propiedades definidas en un archivo CSS se pueden leer usando la función especial getComputedStyles.

Veamos cómo se hace. Supongamos que tenemos el siguiente elemento:

<div id="elem">
	text
</div>

Supongamos que para este elemento están definidos los siguientes estilos:

#elem {
	width: 100px;
	color: red;
	font-size: 20px;
}

Obtenemos una referencia al elemento en una variable:

let elem = document.querySelector('#elem');

Ahora pasamos la referencia al elemento obtenido como parámetro de la función getComputedStyles:

let computedStyle = getComputedStyle(elem);

Como resultado obtendremos un objeto que contiene los valores de las propiedades CSS para nuestro elemento. Vamos a usarlo para leer, por ejemplo, el color:

console.log(computedStyle.color); // mostrará 'red'

Y ahora el ancho:

console.log(computedStyle.width); // mostrará '100px'

Y ahora el tamaño de fuente:

console.log(computedStyle.fontSize); // mostrará '20px'

Para el elemento están definidos los siguientes estilos:

#elem {
	width: 200px;
	height: 200px;
}

Al hacer clic en el botón, muestre el ancho y la altura del elemento.

Para el elemento están definidos los siguientes estilos:

#elem {
	width: 200px;
	height: 200px;
}

Al hacer clic en el botón, aumente el ancho y la altura del elemento al doble.