Como alterar a classe de um elemento em JavaScript: melhores práticas 2025

Como alterar a classe de um elemento em JavaScript: do iniciante ao profissional em 2025

Você já quis que um botão no site mudasse de cor ao clicar, ou que um menu deslizasse suavemente? Tudo isso é a mágica da alteração de classes. A pergunta «How can I change an element's class with JavaScript?» é uma das mais populares no Stack Overflow (dezenas de milhares de visualizações). E não é à toa: sem essa habilidade, é difícil imaginar o desenvolvimento web moderno.

Em 2025, os navegadores ficaram ainda mais inteligentes, mas a ferramenta básica continua a mesma — classList. Neste artigo, vamos abordar todas as formas de alterar a classe de um elemento em JavaScript: desde o clássico até técnicas modernas. Você aprenderá como não pisar em armadilhas e escrever código que não seja vergonhoso mostrar em uma entrevista.

Por que alterar a classe é importante?

Imagine que você está construindo uma casa de blocos. Cada bloco é um elemento HTML, e as classes são adesivos que dizem: "sou vermelho", "sou animado", "estou oculto". Quando o usuário clica em um botão, você simplesmente troca o adesivo — e o elemento ganha vida. Sem a alteração de classes, seria necessário redesenhar toda a interface, o que é lento e triste.

Em 2025, alterar a classe de um elemento em JavaScript é uma operação básica usada em 9 de cada 10 sites interativos. De janelas modais a temas escuros — tudo se baseia em classes.

JavaScript puro: classList — sua principal ferramenta

Se você ainda usa className e concatenação de strings — pare. Em 2025, existe classList. É uma API nativa que funciona em todos os navegadores modernos (sim, até no Safari).

Veja como ela funciona:

// Obtém o elementoconst button = document.querySelector('.my-button');

// Adiciona uma classebutton.classList.add('active');

// Remove uma classebutton.classList.remove('active');

// Alterna uma classebutton.classList.toggle('active');

// Verifica se a classe existeif (button.classList.contains('active')) {  console.log('Botão ativo!');}

Este código é a base que todos devem conhecer. Mas existem nuances que transformam um código bom em excelente.

Classes múltiplas: adicionando e removendo de uma vez

Quer adicionar várias classes ao mesmo tempo? Fácil:

element.classList.add('visible', 'animated', 'highlight');

O mesmo para remoção:

element.classList.remove('hidden', 'fade-out');

Isso funciona até no Internet Explorer 11 (se você ainda precisar dar suporte a ele). Em 2025, isso é padrão.

Substituição de classe: trocar uma por outra

Às vezes, é necessário substituir uma classe por outra. Por exemplo, alternar um ícone de "sol" para "lua". Para isso, existe o método replace:

element.classList.replace('icon-sun', 'icon-moon');

Se a classe icon-sun não existir — nada acontece, não ocorre erro. Isso é seguro e legível.

Alternância condicional: toggle com sinalizador booleano

O método toggle pode receber um segundo argumento — um valor booleano. Se for true — a classe é adicionada; se for false — é removida. Isso é útil quando você quer sincronizar a classe com um estado:

const isDarkMode = true;element.classList.toggle('dark', isDarkMode); // adiciona 'dark'

const isLoggedIn = false;element.classList.toggle('logged-in', isLoggedIn); // remove 'logged-in'

Isso é muito mais limpo do que escrever um if-else.

E o className? Quando é necessário?

O bom e velho className ainda existe, mas seu tempo passou. Ele substitui todas as classes de uma vez:

element.className = 'new-class another-class';

Problema: se o elemento já tiver classes, elas serão apagadas. Em 2025, className é usado apenas em dois casos:

• Quando é necessário substituir completamente