Neste artigo vamos ver como mudar a classe de um elemento com JavaScript – para poder manipular os estilos de CSS que definem a tag.
Fala programador(a), tudo bem? Bora aprender mais sobre JavaScript e manipulação de DOM!
A ideia principal aqui é primeiramente selecionar o elemento
Depois devemos deletar a classe que não precisamos mais do elemento e por fim adicionar a classe que desejamos
Ou pode ser que só vamos adicionar uma classe, você poderá utilizar este código que vamos ver aqui para resolver este problema também
Vamos ver isso na prática:
let el = document.getElementById('elemento');
el.classList.remove('teste');
el.classList.add('testando');Na primeira linha selecionamos o elemento com id testando
Depois utilizando a propriedade classList, que é a coleção de classes do elemento, seguido do método remove, que irá remover a classe passada por parâmetro
Por fim utilizamos add, que vai adicionar a classe passada por parâmetro
Ou seja, com remove podemos remover classes de um elemento, e add conseguimos adicionar classes a ele
Conclusão
Neste artigo vimos como mudar a classe de um elemento com JavaScript
E isso é feito de forma simples quando já selecionamos o elemento, podemos acessar sua propriedade classList, que nos dará todas as classes do mesmo
Também temos os métodos add e remove, que adiciona e remove classes respectivamente
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube