Lendo propriedades de arquivos CSS em JavaScript

As propriedades definidas em um arquivo CSS podem ser lidas usando a função especial getComputedStyles.

Vamos ver como isso é feito. Suponha que temos o seguinte elemento:

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

Suponha que os seguintes estilos sejam definidos para este elemento:

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

Vamos obter uma referência ao elemento em uma variável:

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

Agora, vamos passar a referência ao elemento obtido como parâmetro para a função getComputedStyles:

let computedStyle = getComputedStyle(elem);

Como resultado, obteremos um objeto contendo os valores das propriedades CSS para o nosso elemento. Vamos usá-lo para ler, por exemplo, a cor:

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

E agora a largura:

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

E agora o tamanho da fonte:

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

Os seguintes estilos são definidos para o elemento:

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

Ao clicar no botão, exiba a largura e a altura do elemento.

Os seguintes estilos são definidos para o elemento:

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

Ao clicar no botão, aumente a largura e a altura do elemento em duas vezes.