Como adicionar e remover classes CSS de elementos em JavaScript?

Em JavaScript, você pode adicionar e remover classes CSS de elementos usando os métodos classList.add() e classList.remove(). Esses métodos fornecem uma maneira conveniente de manipular as classes de um elemento HTML. Aqui está como usar esses métodos:

1. Adicionar uma classe a um elemento:

const element = document.getElementById('meuElemento');
element.classList.add('minhaClasse');

Nesse exemplo, o método classList.add() é usado para adicionar a classe CSS chamada “minhaClasse” ao elemento identificado por “meuElemento”. Se o elemento já tiver a classe, ela não será adicionada novamente.

2. Remover uma classe de um elemento:

const element = document.getElementById('meuElemento');
element.classList.remove('minhaClasse');

Nesse exemplo, o método classList.remove() é usado para remover a classe CSS chamada “minhaClasse” do elemento identificado por “meuElemento”. Se o elemento não tiver a classe, não ocorrerá nenhum erro.

3. Alternar a presença de uma classe em um elemento:

const element = document.getElementById('meuElemento');
element.classList.toggle('minhaClasse');

Nesse exemplo, o método classList.toggle() é usado para alternar a presença da classe CSS chamada “minhaClasse” no elemento identificado por “meuElemento”. Se o elemento já tiver a classe, ela será removida; caso contrário, será adicionada.

4. Verificar se um elemento possui uma classe:

const element = document.getElementById('meuElemento');
if (element.classList.contains('minhaClasse')) {
  console.log('O elemento possui a classe "minhaClasse".');
} else {
  console.log('O elemento não possui a classe "minhaClasse".');
}

Nesse exemplo, o método classList.contains() é usado para verificar se o elemento identificado por “meuElemento” possui a classe “minhaClasse”. O método retorna true se o elemento possuir a classe e false caso contrário.

Esses métodos fornecem uma maneira simples e eficiente de adicionar, remover e verificar classes CSS em elementos HTML usando JavaScript. Eles permitem manipular a aparência e o comportamento dos elementos dinamicamente com base em eventos ou lógica do seu código.