Método getComputedStyle() da Window

Definição e uso

getComputedStyle() O método obtém os atributos CSS calculados e os valores do elemento HTML.

getComputedStyle() O método retorna um objeto CSSStyleDeclaration.

Estilo calculado

Estilo calculado se reflete no estilo aplicado ao elemento após a aplicação de todas as origens de estilo.

Origem do estilo: folhas de estilo externas e internas, estilos herdados e estilos padrão do navegador.

Veja também:

Objeto CSSStyleDeclaration

Exemplo

Exemplo 1

Obter a cor de fundo calculada do elemento:

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");

Experimente você mesmo

Exemplo 2

Obter todos os estilos calculados do elemento:

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let text = "";
for (x in cssObj) {
  cssObjProp = cssObj.item(x)
  text += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}

Experimente você mesmo

Exemplo 3

Obter o tamanho da fonte calculado da primeira letra do elemento (usando pseudo-elemento):

const element = document.getElementById("test"); const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");

Experimente você mesmo

Sintaxe

window.getComputedStyle(element, pseudoElement)

Parâmetros

Parâmetros Descrição
element Obrigatório. O elemento para o qual será obtido o estilo calculado.
pseudoElement Opcional. O pseudo-elemento a ser obtido.

Retorno

Tipo Descrição
Objeto Objeto CSSStyleDeclaration que possui todas as propriedades e valores CSS do elemento.

Diferença entre o método getComputedStyle() e a propriedade style

Compare the getComputedStyle() method with the HTMLElement's style attribute: the latter only allows access to the inline styles of the element, which can be specified in any unit, and cannot tell you any information about the styles applied to the element's style sheet.

Suporte de navegador

Todos os navegadores suportam getComputedStyle():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte 9-11 Suporte Suporte Suporte Suporte