Este guia detalha o objetivo e o funcionamento da propriedade 'estilo' do elemento HTML DOM em JavaScript.
Como funciona a propriedade 'estilo' do elemento HTML DOM em JavaScript?
O DOM HTML “ estilo ” é uma propriedade somente leitura que funciona com base nas propriedades de estilo alocadas de acordo. Além disso, ele retorna o “ CSSStyleDeclaration ” que contém todos os atributos de estilo embutidos do elemento HTML específico.
Observação: O objeto “CSSStyleDeclaration” contém os atributos de estilo CSS definidos na seção head.
Sintaxe (Definir uma propriedade de estilo)
elemento. estilo . propriedade = valorDe acordo com a sintaxe acima, o “ estilo ” propriedade suporta apenas um parâmetro “ valor ” que representa o valor da propriedade de estilo especificada.
Sintaxe (Retornar uma propriedade de estilo)
elemento. estilo . propriedadeVamos implementar as sintaxes discutidas acima da propriedade “estilo” de forma prática.
Exemplo 1: Use a propriedade “style” para definir a cor de um determinado elemento HTML
Este exemplo aplica a sintaxe básica do “ estilo ” para definir o valor da propriedade “estilo” de forma que a cor do elemento HTML específico seja alterada.
Código HTML
Primeiro, percorra o código HTML fornecido:
< h2 > Use a propriedade style em JavaScript h2 >
< id h3 = 'H3' > Segundo subtítulo. h3 >
Nas linhas de código acima:
- O ' ” A tag HTML especifica o primeiro subtítulo.
- O ' ” cria o segundo subtítulo do nível 3 com um id atribuído “H3”.
Código JavaScript
Em seguida, siga o código JavaScript declarado:
< roteiro >documento. getElementById ( 'H3' ) . estilo . cor = 'verde' ;
roteiro >
No trecho de código acima, o “ document.getElementById() ” acessa o método “ ” elemento através de seu id “ H3 ” para definir o “ especificado cor ” valor do atributo do elemento através do “ estilo.cor ' propriedade.
Saída
A saída mostra que a representação visual do elemento HTML de destino é definida de acordo com a propriedade “estilo”.
Exemplo 2: Use a propriedade “style” para obter o valor do atributo “style” aplicado
Neste exemplo, a propriedade “estilo” ajuda a descobrir o atributo “estilo” atribuído do elemento HTML usando sua sintaxe generalizada (Retornar uma propriedade de estilo).
Código HTML
O código HTML é declarado aqui:
< h2 > Use a propriedade style em JavaScript h2 >< id h3 = 'H3' estilo = 'cor de fundo:laranja;' > O valor da cor de fundo do segundo subtítulo é : h3 >
< id h4 = 'demonstração' > h4 >
Neste código:
- O ' ” A tag HTML usa o atributo “estilo” que define a cor de fundo do elemento HTML “
”.
- O ' ” cria um subtítulo vazio de nível 4 com um id “ demonstração ”.
Código JavaScript
Agora, observe o código JavaScript fornecido:
< roteiro >const valor = documento. getElementById ( 'H3' ) . estilo . cor de fundo ;
documento. getElementById ( 'demonstração' ) . HTML interno = valor ;
roteiro >
No código escrito acima:
- A variável “ valor ” é declarado com um “ const ” palavra-chave que aplica o “ document.getElementById() ” para buscar o elemento “
” usando seu id para obter o valor do atributo “estilo” aplicado e aplicá-lo ao elemento, ou seja, “
” por meio da propriedade “estilo”.
- O método “document.getElementById()” é usado novamente para acessar o elemento “
” vazio adicionado e exibir o valor do atributo “estilo” alocado em relação ao elemento HTML buscado e anexá-lo como um subtítulo por meio do “ HTML interno ' propriedade.
Saída
A saída aplica a cor de fundo ao elemento e o valor do atributo 'estilo' definido também é retornado de acordo.
Conclusão
JavaScript usa o “ estilo ” para atribuir e retornar as propriedades de “estilo” embutidas do elemento HTML DOM. Requer um “valor” adicional para aplicar a funcionalidade desejada de acordo. Além de definir e recuperar, também é benéfico alterar o atributo “estilo” existente. Este guia demonstrou o objetivo principal, o funcionamento e a implementação prática da propriedade HTML DOM Element style.