Janela getComputedStyle()
Exemplo
Obtenha a cor de fundo calculada de um elemento:
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");
Mais exemplos abaixo.
Definição e uso
O getComputedStyle()
método obtém as propriedades e valores CSS computados de um elemento HTML.
O getComputedStyle()
método retorna um
CSSStyleDeclaration object
.
Estilo Computado
O estilo calculado é o estilo usado no elemento depois que todas as fontes de estilo foram aplicadas.
Fontes de estilo: folhas de estilo externas e internas, estilos herdados e estilos padrão do navegador.
Veja também:
Sintaxe
window.getComputedStyle(element, pseudoElement)
Parâmetros
Parameter | Description |
element | Required. The element to get the computed style for. |
pseudoElement | Optional. A pseudo-element to get. |
Valor de retorno
Modelo | Descrição |
Um objeto | Um objeto CSSStyleDeclaration com todas as propriedades e valores CSS do elemento. |
Mais exemplos
Obtenha todos os estilos calculados de um 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>";
}
Obtenha o tamanho da fonte calculado da primeira letra em um elemento (usando pseudo-elemento):
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");
Suporte ao navegador
getComputedStyle()
é suportado em todos os navegadores:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |