CSS JavaScript

Como mudar a classe de um elemento com JavaScript

12 de julho de 2020

Como mudar a classe de um elemento com JavaScript

Neste artigo vamos ver como mudar a classe de um elemento com JavaScript – para poder manipular os estilos de CSS que definem a tag.

mudar a classe de um elemento com js capa

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

1
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x