Adicionar classe em tag HTML com JavaScript

Neste artigo você vai aprender a adicionar classe em tag HTML com JavaScript puro, ou seja, alterar o atributo de classe de um elemento via DOM!

Fala programador(a), beleza? Bora aprender mais sobre DOM, alteração de atributos e também JavaScript!

Neste cenário, vamos precisar primeiramente selecionar um elemento com um método de document

Alguns deles disponíveis são:

• querySelector
• getElementById
• getElementByClassName

Com o elemento selecionado, vamos utilizar a propriedade classList, que nos dá a possibilidade de alterar classes de um elemento

Para adicionar uma nossa classe utilizamos o método add, vamos inserir o nome da classe como argumento

Veja um exemplo prático do que foi explicado acima:

<button id="refresh">Clique em mim</button>

Temos este HTML como exemplo, agora vamos trabalhar neste botão para colocar a nova classe nele

Veja o JS necessário:

var btn = document.querySelector("#refresh");

btn.classList.add("btn");

console.log(btn.classList[0]); // btn

Aqui selecionamos o elemento primeiramente, e depois com classList e add, adicionamos a classe btn

Veja que podemos acessar ela também via classList, utilizando a notação de array

Como é a única classe, acessamos o elemento de índice 0 e recebemos “btn” como resposta

E para remover classes de elemento HTML?

Para remover o processo é semelhante ao de adicionar, porém vamos utilizar o método remove de classList

Neste método passamos a classe, por meio de string, que queremos remover

E assim a classe será excluída do elemento alvo!

Conclusão

Neste artigo você aprendeu a como adicionar classe em tag HTML, utilizando JS puro

Nós acessamos a propriedade classList do elemento selecionado, nela utilizamos o método add

Basta passar a classe que queremos adicionar, como string e pronto!

O elemento agora possui uma nova classe no atributo class da tag de HTML

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!