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]); // btnAqui 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!