Adicionando e removendo classes em elementos HTML com classList em JavaScript

Como adicionar e remover classes em elementos (classList)?

Em JavaScript, uma maneira eficiente de manipular as classes de um elemento HTML é através da propriedade classList. Essa propriedade fornece métodos convenientes para adicionar, remover e alternar classes em um elemento. A manipulação de classes é fundamental para a construção de interfaces interativas, especialmente quando você deseja aplicar ou remover estilos CSS dinamicamente.

O que é classList?

O classList é uma propriedade que fornece acesso à lista de classes de um elemento HTML. Essa lista pode ser manipulada de forma simples usando os métodos integrados, como add(), remove(), toggle() e contains(). O classList torna a manipulação de classes muito mais simples e legível do que manipular a string diretamente.

Exemplo de como acessar o classList de um elemento:

let elemento = document.getElementById('meuElemento');
console.log(elemento.classList);  // Exibe a lista de classes do elemento

Neste exemplo, classList fornece a lista de classes do elemento com id="meuElemento", permitindo que você manipule as classes de forma conveniente.

Adicionando classes com classList.add()

O método add() permite adicionar uma ou mais classes a um elemento. Se a classe já existir, ela não será adicionada novamente.

Exemplo de código com add():

let elemento = document.getElementById('meuElemento');
elemento.classList.add('novaClasse');
console.log(elemento.classList);  // Exibe as classes do elemento, agora com 'novaClasse'

Aqui, add('novaClasse') adiciona a classe novaClasse ao elemento. Esse método também pode adicionar várias classes ao mesmo tempo.

Removendo classes com classList.remove()

O método remove() é usado para remover uma ou mais classes de um elemento. Se a classe não existir no elemento, nada acontece.

Exemplo de código com remove():

let elemento = document.getElementById('meuElemento');
elemento.classList.remove('classeAntiga');
console.log(elemento.classList);  // Exibe as classes do elemento, agora sem 'classeAntiga'

Aqui, remove('classeAntiga') remove a classe classeAntiga do elemento, se ela estiver presente.

Alternando classes com classList.toggle()

O método toggle() permite alternar uma classe em um elemento. Se a classe já estiver presente, ela será removida; caso contrário, ela será adicionada. Isso é útil quando você deseja alternar entre dois estados, como aplicar ou remover uma classe de "ativo" em um botão.

Exemplo de código com toggle():

let elemento = document.getElementById('meuElemento');
elemento.classList.toggle('ativa');
console.log(elemento.classList);  // Exibe as classes, com 'ativa' se ela foi adicionada ou removida

Aqui, toggle('ativa') alterna a classe ativa no elemento. Se a classe já estiver presente, ela será removida; se não estiver, ela será adicionada.

Verificando a presença de uma classe com classList.contains()

O método contains() verifica se um determinado elemento contém uma classe. Ele retorna true se o elemento tiver a classe, e false caso contrário.

Exemplo de código com contains():

let elemento = document.getElementById('meuElemento');
let temClasse = elemento.classList.contains('ativa');
console.log(temClasse);  // Exibe 'true' ou 'false', dependendo se 'ativa' está presente

Neste exemplo, contains('ativa') verifica se o elemento tem a classe ativa e retorna true ou false.

Comparando classList com a manipulação direta da string className

Embora o classList seja a maneira recomendada para manipular classes, é possível alterar a lista de classes de um elemento diretamente através da propriedade className. No entanto, isso pode ser mais trabalhoso e menos eficiente.

Exemplo de código com className:

let elemento = document.getElementById('meuElemento');
console.log(elemento.className);  // Exibe as classes do elemento

// Adicionando uma classe usando className
elemento.className += ' novaClasse';
console.log(elemento.className);  // Exibe as classes, agora com 'novaClasse'

Embora isso funcione, classList é preferível por ser mais eficiente e claro ao adicionar, remover ou alternar classes.

Diferenças entre classList e className

Quando usar classList?

• Use classList sempre que possível, pois ele fornece métodos eficientes e claros para manipular classes. Ele é especialmente útil para adicionar, remover e alternar classes sem se preocupar com a manipulação manual de strings.
• Evite className para manipulação de classes sempre que possível, pois ele exige a manipulação direta de strings e pode ser mais propenso a erros.

Exemplo prático de uso de classList para adicionar e remover classes

Vamos ver um exemplo prático de como você pode usar classList para adicionar, remover e alternar classes em elementos HTML:

let elemento = document.getElementById('meuElemento');

// Adicionando uma classe
elemento.classList.add('novaClasse');

// Removendo uma classe
elemento.classList.remove('classeAntiga');

// Alternando uma classe
elemento.classList.toggle('ativa');

Neste exemplo, classList.add(), classList.remove() e classList.toggle() são usados para manipular as classes de um elemento HTML de forma eficiente e clara.

Conclusão

A manipulação de classes é uma das tarefas mais comuns ao trabalhar com o DOM em JavaScript. A propriedade classList oferece uma maneira simples e eficiente de adicionar, remover e alternar classes, além de verificar a presença de uma classe. Usando classList, seu código se torna mais legível e menos propenso a erros, tornando-o a melhor escolha para manipulação de classes em JavaScript.

Por que usar classList para manipular classes em JavaScript?

Manipular classes de elementos é fundamental para construir interfaces web dinâmicas. Usar classList é uma abordagem mais moderna e eficiente, pois oferece métodos específicos para adicionar, remover e alternar classes, além de verificar a presença delas. Comparado ao método mais antigo de manipulação direta de strings com className, o classList é mais seguro e flexível, o que o torna a opção preferida entre os desenvolvedores. Aproveitar o poder do classList pode melhorar a legibilidade e a performance do seu código.

Algumas aplicações:

• Adicionar, remover e alternar classes para modificar dinamicamente a aparência de elementos na página.
• Usar classList para manipular estados de botões, painéis e outros elementos interativos.
• Aplicar transições e animações CSS de forma interativa com a manipulação de classes.
• Alterar a aparência de formulários ou de componentes conforme a interação do usuário.

Dicas para quem está começando

• Use classList.add() para adicionar novas classes de forma segura.
• Para remover uma classe, use classList.remove() — é mais eficiente do que modificar a string diretamente.
• Use classList.toggle() quando você precisar alternar entre duas classes, como para mostrar/ocultar um elemento.
• Evite usar className para adicionar ou remover classes, pois classList é muito mais fácil de usar e menos propenso a erros.

Contribuições de

Lucas Souza

Desenvolvedor front-end apaixonado por JavaScript e interfaces intuitivas.

Mais sobre o autor

Compartilhe este tutorial