Como obter e modificar os atributos, classes e estilos do elemento através do JavaScript

Muitas vezes, as páginas da web precisam mudar seus elementos ou como seus elementos parecem, dependendo das ações ou escolhas do usuário. Alterar os elementos, atributos, classes e estilos de uma página da web é tudo feito com a ajuda do Dom (Modelo de objeto de documento). O DOM foi definido como um padrão sobre como todo navegador interpretará a página da web html e como ele acessará os diferentes elementos na página da web por W3C (World Wide Web Consortium).

O JavaScript também interage com os elementos de uma página HTML usando o DOM e, neste post, vamos aprender a acessar elementos HTML com JavaScript e como alterar seus atributos, classes e estilo usando JavaScript.

Então, vamos primeiro criar uma página HTML com vários elementos, usando as seguintes linhas de código:

Mude meu estilo

Mude meu atributo

Mude minha aula

Essas linhas de código nos darão a seguinte página da web:

Como obter elementos em JavaScript

Antes de vermos como mudar de elementos usando JavaScript, primeiro precisamos saber como obter elementos no JavaScript. Bem, para obter referência do elemento, podemos usar uma das várias funções fornecidas pelo JavaScript, como:

• getElementById ()
• getElementByclassName ()
• getElementByName ()
• getElementByTagName ()
• getElementByTagnamens ()

Eles são todos muito fáceis de usar e entender pelo nome deles. Suponha que tenhamos um elemento dentro do nosso HTML com um id de “XYZ”, Para acessar os dados deste elemento, usaríamos a seguinte linha no arquivo JavaScript ou na tag de script:

var obj = documento.getElementById ("xyz");

Da mesma forma, se estamos tentando acessar um elemento usando seu nome de classe, usaríamos a função getElementByclassName ().

Mudança de estilo de um elemento

Olhando para o nosso arquivo html, sabemos que o div que diz "mudar meu estilo" tem o id de "Mudança de estilo”, Então vamos acessar isso com a seguinte linha:

var cs = documento.getElementById ("Changestyle");

Agora, que temos nossa referência de elemento na variável "cs", podemos acessar sua função de estilo usando o DOT-Operator E a partir daí, podemos mudar seus diferentes valores de estilo. Por exemplo, se mudássemos a cor de fundo para amarelo, usaríamos a linha:

cs.estilo.AntecedentesColor = "Amarelo";

Depois de executar o arquivo HTML, você verá a seguinte saída:

Você também pode ver na foto acima, que fomos capazes de mudar o estilo do elemento.

Altere a classe de um elemento usando JavaScript

Temos o elemento com o ID "ChangeClass" que tem uma classe de "MyClass", para alterar a classe desse elemento que a primeira coisa que precisamos fazer é nos referir a esse elemento em JavaScript usando a seguinte linha de código:

var cc = documento.getElementById ("ChangeClass");

Agora que temos a referência de elemento na variável “cc”Podemos acessar o atributo de suas classes usando o Classlist () função. Para adicionar uma nova classe “Newclass” na mesma variável, podemos usar a seguinte linha de código:

cc.Lista de classe.add ("newclass");

Se você abrir o console do desenvolvedor e verificar o atributo da classe, encontrará o seguinte resultado:

Como você pode ver, você conseguiu adicionar outra classe ao atributo de classe do elemento usando JavaScript. Se você deseja remover uma classe já existente da lista, pode usar a seguinte linha de código:

cc.Lista de classe.remover ("myclass");

Depois de executar a linha acima, você verá os seguintes resultados no console do desenvolvedor:

E aí está você; Você conseguiu remover uma classe da lista de classes de um elemento usando JavaScript.

Mudando o atributo do elemento

JavaScript tem uma função chamada de “setattribute”Que permite ao usuário alterar o valor de qualquer atributo do elemento, seja um atributo de“ classe ”ou um atributo“ id ”. Por exemplo, para alterar a classe de um elemento, vamos primeiro ponto para o elemento que diz “Altere meu atributo, usamos a seguinte linha de código:

var Ca = documento.getElementById ("changeattr");

E então podemos usar a função "setattribute" como:

ca.setattribute ("classe", "hello");

Agora, podemos observar essa mudança nas ferramentas do desenvolvedor como

Podemos até atribuir nossos próprios atributos ao elemento usando a função, por exemplo, se queremos um atributo de “newattr”Para este elemento com um valor de“feito”, Podemos acrescentar isso usando a seguinte linha de código:

ca.setattribute ("newAttr", "feito");

E se observarmos o elemento no console do desenvolvedor, podemos ver o seguinte resultado:

Como fica claro na imagem acima, conseguimos adicionar um novo atributo chamado “newattr”Para o nosso elemento usando JavaScript.

Conclusão

O JavaScript fornece vários recursos e funções que nos ajudam a modificar várias propriedades e atributos de um elemento HTML. Todas essas alterações em um elemento HTML são feitas com a ajuda do Modelo de Objeto do Documento (DOM), pois o JavaScript interage com o DOM para alterar as propriedades de um elemento. Hoje, neste post, aprendemos como podemos usar o JavaScript e obter uma referência a um elemento e depois com a ajuda dessa referência como podemos alterar o estilo desse elemento, a classe do elemento e como podemos alterar o atributos do elemento. Junto com essas alterações, até aprendemos como podemos adicionar um novo atributo de nossa escolha a um elemento HTML.