Remover e Inserir um atributo na Tag HTML usando JavaScript

 Em algum momento você já ser deparou com a necessidade de remover um atributo ou adicionar para realizar uma função especifica usando o JavaScript.

Vou mostrar de forma simples e rápida como realizar essa atividade usando removeAttribute e setAttribute.

 

Usando removeAttribute e setAttribute

O que é um atributo no HTML?

Atributos são informações que passamos na Tag para que ela se comporte da maneira esperada. Existem atributos globais (que funcionam em todas as Tags) e específicos (que são direcionados para cada Tag, através de especificação).

Removendo um atributo da Tag HTML

Para demover um atributo deve usar um comando JavaScript chamado removeAttribute que remove um atributo de um elemento específico.

Veja o exemplo de Tag HTML onde será removido o atributo href e class.

<a id="botao" href="www.google.com.br" class="bt">Visitar google</a>

 

Para remover usando o JS é necessário localizar o ID da Tag para aplicar o removeAttribute.

document.getElementById("botao").removeAttribute("href");

document.getElementById("botao").removeAttribute("class");

 

Adicionando um atributo no HTML

Quando adicionamos um atributo é necessário passar dois valores sendo eles, nome do atributo e nome que fica dentro do atributo.

No exemplo abaixo vou mostrar como adicionar um atributo class e o nome da class.

<a id="botao2" href="www.google.com.br"> Visitar google</a>

 

Na tag acima foi criada sem usar Class e com o JavaScript será inserido.

document.getElementById("botao2").setAttribute("Class", "comprar");

 

Se um atributo especificado já existe, então o valor do atributo é mudado para o valor passado para a função. Se não existe, então o atributo é criado.