Como mudar o estilo HTML através do JavaScript

Como mudar o estilo HTML através do JavaScript

HTML DOM Acrônimo para o Modelo de Objeto de Documento é uma interface de programação para documentos escritos em HTML e XML. Fornece uma estrutura lógica para os documentos. Html dom define como os documentos html podem ser avaliados e alterados. Usando o HTML DOM, você pode alterar o estilo de elementos HTML através do JavaScript.

A propriedade de estilo do HTML DOM é usada com o objetivo de mudar o estilo dos elementos HTML.

Propriedade de estilo de html dom

Um atributo de estilo de um elemento HTML é representado por um objeto CSSSTYLEDECLARATION. Para devolver este objeto CSSStyleleDeclaration, a propriedade de estilo é usada. Esta propriedade é usada para obter ou definir o estilo de elementos usando várias propriedades CSS.

Sintaxe

A sintaxe da propriedade HTML Dom Style é dada da seguinte forma.

documento.getElementById (id).estilo.Propriedade = novo estilo

Se você simplesmente deseja obter uma propriedade de estilo, use a seguinte sintaxe.

elemento.estilo.propriedade

No entanto, se você deseja definir uma propriedade de estilo, use a sintaxe fornecida

elemento.estilo.propriedade = valor

Agora que temos um entendimento básico do que é a propriedade HTML DOM Style. Agora iremos explorar alguns exemplos relevantes.

Alterando o estilo HTML

Os exemplos dados demonstram como podemos mudar o estilo de elementos HTML usando JavaScript.

Exemplo 1
Suponha que você queira mudar a cor de

elemento usando seu id.




Propriedade do estilo html dom


Propriedade do estilo html dom




No exemplo acima, primeiro simplesmente definimos dois

elementos e atribuíram um ID único.

Propriedade do estilo html dom


Propriedade do estilo html dom

Então mudamos a cor de

elemento com id = "para2". Na parte seguinte de código, onde estamos simplesmente obtendo o elemento desejado por seu ID e mudando sua cor para vermelho.

Aqui está como parecia antes de mudar a cor.

Depois de mudar a cor.

Exemplo 2
Suponha que você queira mudar a cor e a família de fontes de

elemento usando seu id.




Aprendendo html dom


Aprendendo html dom




No exemplo acima, primeiro simplesmente definimos dois

elementos e atribuíram um ID único.

Aprendendo html dom


Aprendendo html dom

Então mudamos a cor e a família de fontes de

elemento com id = ”head2". Na parte seguinte de código, onde estamos simplesmente obtendo o elemento desejado por seu ID e mudando sua cor para a família Blue and Font para Arial.


Erro de Geshi: Geshi não conseguiu encontrar o idioma jacascript (usando Path/Home/Nginx/Domínios/Linuxhint.com/public/wp-content/plugins/codecolorer/libes/geshi/) (código 2)

Aqui está como parecia antes de mudar a cor e a família de fontes.

Depois de mudar a família e a família de fontes, parece isso.

Conclusão

Para alterar o estilo dos elementos HTML usando JavaScript, usamos a propriedade HTML DOM Style. A propriedade HTML DOM Style permite que você obtenha ou definir o estilo de um elemento HTML. Pode haver abordagens diferentes para usar essa propriedade para alterar o estilo dos elementos HTML. Este tutorial abrange propriedade de estilo html dom e diferentes abordagens que podem ser usadas para mudar o estilo de elementos html.