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:

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

Suponha que os seguintes estilos sejam definidos para este elemento:

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

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

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

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

javascript 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:

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

E agora a largura:

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

E agora o tamanho da fonte:

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

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

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