Resumo : neste tutorial, você aprenderá como usar JavaScript getComputedStyle()para obter as propriedades CSS computadas de um elemento.
Introdução ao getComputedStyle()método JavaScript
O getComputedStyle()é um método do windowobjeto, que retorna um objeto que contém o estilo computado de um elemento:
let style = window.getComputedStyle(element [,pseudoElement]);
Linguagem de código: JavaScript ( javascript )Parâmetros
O getComputedStyle()método aceita dois argumentos:
elementé o elemento que você deseja que retorne os estilos computados. Se você passar outro tipo de nó, por exemplo, nó Texto, o método gerará um erro.pseudoElementespecifica o pseudoelemento a ser correspondido. O padrão énull.
Por exemplo, se você deseja obter o valor calculado de todas as propriedades CSS de um link com o estado hover, passe os seguintes argumentos para o getComputedStyle()método:
let link = document.querySelector('a');
let style = getComputedStyle(link,':hover');
console.log(style);
Linguagem de código: JavaScript ( javascript )Observe que windowé o objeto global, portanto, você pode omiti-lo ao chamar o getComputedStyle()método get.
Valor de retorno
O getComputedStyle()método retorna um objeto de estilo ativo que é uma instância do CSSStyleDeclarationobjeto. O estilo é atualizado automaticamente quando os estilos do elemento são alterados.
getComputedStyle()Exemplos de JavaScript
Vejamos alguns exemplos de uso do getComputedStyle()método.
1) getComputedStyle()Exemplo simples
Considere o seguinte exemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS getComputedStyle() Demo</title>
<style type="text/css">
.message {
background-color: #fff3d4;
border: solid 1px #f6b73c;
padding: 20px;
color: black;
}
</style>
</head>
<body>
<p class="message" style="color:red">
This is a JS getComputedStyle() Demo!
</p>
<script>
let message = document.querySelector('.message');
let style = getComputedStyle(message);
console.log('color:', style.color);
console.log('background color:', style.backgroundColor);
</script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )Observe que, para fins de demonstração, misturamos todo CSS e JavaScript com HTML. Na prática, você deve separá-los em arquivos diferentes.
Saída:
color: rgb(255, 0, 0)
background color: rgb(255, 243, 212)
Como funciona:
- Primeiro, defina regras CSS para a
messageclasse na seção head do arquivo HTML. A cor do texto é preta. - Segundo, declare um elemento de parágrafo cuja cor do texto seja vermelha conforme definido no estilo embutido. Esta regra substituirá aquela definida na seção head.
- Terceiro, use o
getComputedStyle()método para obter todo o estilo computado do elemento de parágrafo. A propriedade color é vermelha conforme indicado na janela do console (rgb(255, 0, 0)), conforme esperado.
2) O getComputedStyle()exemplo para pseudo-elementos
O exemplo a seguir usa o getComputedStyle()método para extrair informações de estilo de um pseudoelemento:
<html>
<head>
<title>JavaScript getComputedStyle() Demo</title>
<style>
body {
font: arial, sans-serif;
font-size: 1em;
line-height: 1.6;
}
p::first-letter {
font-size: 1.5em;
font-weight: normal
}
</style>
</head>
<body>
<p id='main'>JavaScript getComputedStyle() Demo for pseudo-elements</p>
<script>
let p = document.getElementById('main');
let style = getComputedStyle(p, '::first-letter');
console.log(style.fontSize);
</script>
</body>
</html>Linguagem de código: HTML, XML ( xml )Saída:
24px
Como funciona:
- Primeiro, defina regras CSS para a primeira letra de qualquer elemento de parágrafo na seção principal do arquivo HTML.
- Em seguida, use o
getComputedStyle()método para extrair o estilo computado do pseudoelemento. O tamanho da fonte da primeira letra do parágrafo com o id é 24px.
Resumo
- O
getComputedStyle()é um método dowindowobjeto. - O
getComputedStyle()método retorna um objeto que contém o estilo computado de um elemento.
