Adicionando e removendo classes CSS: trocando de 'roupa' rapidamente

Descubra como aplicar ou remover conjuntos de estilos pré-definidos.

Você já viu que dá para mudar estilos com element.style.
Agora vamos aprender um jeito mais organizado e profissional: usar classes CSS com JavaScript.

Pense assim:

  • CSS define várias “roupas prontas” (classes)
  • JavaScript decide quando vestir ou tirar cada roupa

Isso deixa o código mais limpo e fácil de manter.

Por que usar classes em vez de vários .style?

Quando você faz muitas mudanças com .style, o JavaScript pode ficar grande e repetitivo.
Com classes, você centraliza o visual no CSS e usa JavaScript só para controlar estados.

Exemplo de estados comuns:

  • botão ativo/inativo
  • campo com erro/sucesso
  • menu aberto/fechado
  • tema claro/escuro

A ferramenta principal: classList

Todo elemento tem classList, que ajuda a manipular classes com métodos práticos.

Métodos mais usados:

  • add("classe") → adiciona classe
  • remove("classe") → remove classe
  • toggle("classe") → adiciona se não tiver, remove se já tiver
  • contains("classe") → verifica se a classe existe

Exemplo básico

<div id="caixa" class="card">Conteúdo</div>

.destaque {
  background: #ffe08a;
  border: 2px solid #ffb703;
}

const caixa = document.getElementById("caixa");
caixa.classList.add("destaque");

Resultado: a caixa recebe o estilo de destaque.

Removendo classe

caixa.classList.remove("destaque");

A “roupa” é retirada e o visual volta ao normal (ou ao que sobrar de outras classes).

Alternando classe com toggle

Perfeito para clique em botão, abrir menu, tema escuro etc.

caixa.classList.toggle("destaque");
  • Se não tiver destaque, adiciona.
  • Se já tiver, remove.

Verificando com contains

if (caixa.classList.contains("destaque")) {
  console.log("A caixa está destacada");
}

Muito útil para regras condicionais.

Exemplo prático: botão de tema

<button id="btnTema">Trocar tema</button>
<div id="painel" class="painel">Painel principal</div>

.painel {
  background: #f5f5f5;
  color: #222;
  padding: 16px;
  border-radius: 8px;
}

.escuro {
  background: #222;
  color: #f5f5f5;
}

const btnTema = document.getElementById("btnTema");
const painel = document.getElementById("painel");

btnTema.addEventListener("click", function () {
  painel.classList.toggle("escuro");
});

A cada clique, o painel troca de tema.

Boas práticas

  • Use nomes de classe claros (ativo, erro, aberto, escuro).
  • Deixe a regra visual no CSS e o comportamento no JavaScript.
  • Evite sobrescrever className sem necessidade.
  • Prefira classList para adicionar/remover sem apagar outras classes.

Resumo da lição

  • Classes CSS são “roupas” reutilizáveis.
  • Com JavaScript, você controla essas roupas com classList.
  • add, remove, toggle e contains resolvem a maioria dos cenários.
  • Essa abordagem deixa seu código mais limpo, escalável e fácil de manter.