Como alterar o atributo de estilo de um elemento dinamicamente usando JavaScript?

O Modelo de Objeto do Documento (DOM) fornece um recurso para controlar os estilos dinamicamente no desenvolvimento da web. Por exemplo, ele se integra ao JavaScript para fornecer acessibilidade para modificar as propriedades dos elementos. É útil alterar o tamanho da cor, fundo e texto em diferentes aplicativos do mundo real. Neste artigo, você mudará os atributos de estilo de um elemento utilizando JavaScript.

Como mudar o atributo de estilo de um elemento dinamicamente.

É fácil modificar o atributo de estilo de um elemento empregando JavaScript. O funcionamento desta conversão é o seguinte. Primeiramente, getElementById é utilizado para acessar os elementos dos objetos do documento. Depois disso, é criado um botão que ocorre se o cliente o pressionar. Portanto, a propriedade de um elemento específica é acessada e o usuário altera dinamicamente o atributo de estilo de um elemento.

Sintaxe

elemento.estilo.PropertyName = "PropertyValue";

Parâmetros

A descrição dos parâmetros é a seguinte:

• nome da propriedade: especifica o nome de propriedade como cor, tamanho de fonte, etc.
• valor da propriedade: representa o valor a ser atribuído à propriedade de um elemento, E, G, "vermelho".

Exemplo

Um exemplo é adaptado para alterar a cor do texto, acessando o atributo de estilo de um elemento. O código é dado abaixo considerando a mudança dinâmica de atributos de estilo.

Código

Um exemplo para alterar as propriedades dinâmicas

Bem -vindo ao Javascript World "

A descrição do código é explicada em uma ordem lógica.

• Um botão é criado passando o valor "Aperte o botão".
• A "Pressbtn ()”O método é anexado a este botão que é acionado quando é chamado.
• Depois disso, o método acima “Pressbtn ()”Está escrito dentro Tag.
• Neste método, myelement A variável é utilizada para salvar os atributos do elemento.
• Finalmente, os atributos de estilo desse elemento são alterados dinamicamente quando o Pressbtn () O método é chamado.

Saída

Depois de pressionar o botão “Aperte o botão", o Pressbtn () O método é acionado, o que muda o atributo de estilo deste elemento específico dinamicamente.

Finalmente, a cor do texto preto de “Bem -vindo ao JavaScript”É alterado para vermelho no navegador, utilizando o JavaScript Pressbtn () método.

Conclusão:

Primeiro, o elemento é acessado usando o getElementById e depois o documento.estilo.A propriedade é empregada para alterar o atributo de estilo do elemento. Por fim, um botão está associado a ele e, quando esse botão é pressionado, o estilo do elemento muda. Este artigo demonstra o método possível para converter o atributo de estilo em JavaScript.