Função getComputedStyle

A função getComputedStyle permite obter o valor de qualquer propriedade CSS de um elemento, mesmo do arquivo CSS.

Sintaxe

let objeto = getComputedStyle(elemento);

Detalhes

Como funciona (atenção: não é como esperamos): a função recebe como parâmetro o elemento, e retorna um objeto, que contém em si todas as propriedades CSS do elemento passado. Vamos colocar este objeto em uma variável style. O nome é arbitrário, é apenas uma variável - como criarmos, assim iremos acessar:

let elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // em style estão as propriedades CSS

Vamos exibir, por exemplo, a largura. Isto é feito assim - style.width:

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

let style = getComputedStyle(elem);
console.log(style.width);

Para exibir, por exemplo, o padding esquerdo - fazemos assim - style.paddingLeft:

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

let style = getComputedStyle(elem);
console.log(style.paddingLeft);

No próximo exemplo vamos exibir todas as propriedades CSS que nos interessam para o nosso elemento:

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

#elem {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('paddingLeft: ' + style.paddingLeft); // exibirá '30px'
console.log('borderTopWidth: ' + style.borderTopWidth); // exibirá '20px'
console.log('borderTopStyle: ' + style.borderTopStyle); // exibirá 'solid'

Imprecisão do getComputedStyle

Às vezes a função getComputedStyle funciona não muito corretamente com largura e altura. Isto está relacionado ao fato de que padding e a borda expandem o bloco. No próximo exemplo, ao bloco foi definida uma largura de 200px, assim como borda e border. A largura real do bloco é 300px, mas getComputedStyle vai exibir de qualquer forma 200px:

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

#elem {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // exibirá '200px'
console.log('height: ' + style.height); // exibirá '200px'

Ou seja: acontece que getComputedStyle ignora a expansão do bloco e mostra seus tamanhos como se essa expansão não existisse. Mas isso ainda não é tudo: também importa a presença ou ausência da barra de rolagem - alguns navegadores subtraem a largura da barra de rolagem da largura calculada via getComputedStyle, e alguns não subtraem. Enfim, aqui geralmente tudo não é cross-browser e é melhor não usar getComputedStyle para determinar largura e altura, e sim usar as métricas que estudaremos um pouco abaixo.

Valores computados

Há mais uma nuance: se a largura for definida em % - então após o trabalho de getComputedStyle veremos ela em px. Ou seja, essencialmente não obtemos a largura definida, mas a computada. Veja no próximo exemplo:

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

#elem {
	width: 30%; /* largura definida em % */
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // exibirá a largura em px

Veja também

a propriedade cssText,
que define estilos CSS em massa