Este post descreve o objetivo, o funcionamento e o uso do método “getComputedStyle()” do objeto janela em JavaScript.
O que o método “getComputedStyle()” do objeto Window faz em JavaScript?
O ' getComputedStyle() ” retorna o objeto “CSSStyleDeclaration” que contém uma coleção de propriedades CSS e seus valores. Ele calcula as propriedades de estilo do elemento HTML de destino. Além disso, também desempenha um papel significativo no cálculo das propriedades de estilo da parte específica do elemento HTML.
Sintaxe
janela. getComputedStyle ( elemento , pseudoElemento )
Na sintaxe acima:
- janela: É o objeto global que representa a janela do navegador.
- elemento: Ele especifica o elemento HTML específico cujo estilo precisa ser computado.
- pseudoElemento: Refere-se à parte do elemento HTML fornecido, por exemplo, primeira letra, última letra, etc.
A seção a seguir realiza a ilustração prática do método “getComputedStyle()” com a ajuda de exemplos.
Código HTML (incluindo estilo CSS)
Primeiro, tenha uma visão geral do seguinte código HTML:
< cabeça >
< estilo >
h3{
tamanho da fonte: 20px;
cor de fundo: verde amarelo
}
< / estilo >
< / cabeça >
< corpo >
< h2 > Use o método getComputedStyle() do objeto Window < / h2 >
< h3 eu ia = 'demonstração' > O tamanho da fonte do elemento HTML fornecido é: < / h3 >
< p eu ia = 'amostra' >< / p >
Nas linhas de código acima:
- O '
” aplica o estilo declarado da tag “ ” Elemento HTML. - No '
” seção, um subtítulo é incluído no “ ” - Em seguida, o elemento “
” com um id “ demonstração ” especifica um segundo subtítulo.
- Por último, o “ ” tag refere-se a um parágrafo vazio com um id “ amostra ” para exibir as propriedades CSS calculadas do elemento de destino.
Observação: Este código HTML é seguido em todos os exemplos declarados desta postagem.
Exemplo 1: Aplicação do método “getComputedStyle()” para calcular o tamanho da fonte do elemento HTML
Este exemplo aplica o método “getComputedStyle()” para obter o tamanho da fonte do elemento HTML de destino.
Código JavaScript
Considere o código JavaScript indicado:
< roteiro >const elemento = documento. getElementById ( 'demonstração' ) ;
const obj = janela. getComputedStyle ( elemento )
deixe o tamanho = obj. getPropertyValue ( 'tamanho da fonte' ) ;
documento. getElementById ( 'amostra' ) . HTML interno = tamanho ;
roteiro >
No trecho de código acima:
- Declare uma variável “ elemento ” com uma palavra-chave “const” que utiliza o “ getElementById() ” para acessar o elemento “
” por meio de seu id “ demonstração ”.
- Depois disso, aplique o “ getComputedStyle() ” para calcular as propriedades CSS do elemento “
” buscado.
- A seguir, o “ tamanho ” variável aplica o “ getPropertyValue() ” método que retorna o valor da propriedade CSS aplicada “ tamanho da fonte ” como uma string.
- Por fim, o método “getElementById()” acessa o parágrafo vazio e exibe o valor calculado da propriedade CSS usando o “ HTML interno ' propriedade.
Saída
Como visto, a saída exibe o valor de tamanho de fonte aplicado em relação ao elemento HTML correspondente, ou seja, “
”.
Exemplo 2: Aplicação do método “getComputedStyle()” para calcular a cor de fundo do elemento HTML
Neste exemplo, o método discutido é utilizado para calcular a cor de fundo do elemento HTML específico:
< roteiro >const elemento = documento. getElementById ( 'demonstração' ) ;
const obj = janela. getComputedStyle ( elemento )
deixe bgcolor = obj. getPropertyValue ( 'cor de fundo' ) ;
documento. getElementById ( 'amostra' ) . HTML interno = bgcolor ;
roteiro >
No bloco de código acima, o “ getComputedStyle() ” método calcula o “ cor de fundo ” do elemento “
” cujo id é “demo” e retorna seu valor como “rgb” através do “ getPropertyValue() ” método.
Saída
A saída mostra claramente a cor de fundo computada do elemento HTML buscado.
Conclusão
JavaScript oferece o “ getComputedStyle() ” para calcular as propriedades de estilo CSS do elemento HTML de destino. O valor calculado desse método é uma string que contém as propriedades CSS e seus valores. Ele pode ser implementado de diferentes maneiras usando JavaScript para obter as propriedades CSS de qualquer elemento HTML. Este post forneceu uma visão detalhada do objetivo, funcionamento e uso do método “getComputedStyle()” do objeto janela em JavaScript.