Aula 53 — Manipulação de classes CSS

Nas últimas aulas, aprendemos a criar elementos dinamicamente, delegar eventos e escrever código performático no DOM.

Agora vamos fechar esse bloco entendendo a forma mais correta, limpa e performática de alterar o visual da página usando JavaScript:

manipulando classes CSS.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Adicionar classes CSS via JavaScript
• Remover classes CSS
• Alternar classes dinamicamente
• Verificar se um elemento possui uma classe
• Controlar o visual da interface sem usar estilos inline

Por que manipular classes (e não estilos)?

É tecnicamente possível alterar estilos direto pelo JavaScript:

 element.style.color = "red"; element.style.fontSize = "20px"; 

Mas isso não é a melhor prática.

O ideal é manter a separação:

• HTML → estrutura
• CSS → visual
• JavaScript → comportamento

Conhecendo o classList

Para trabalhar com classes CSS no JavaScript, usamos a propriedade classList.

Ela fornece métodos simples e poderosos para lidar com classes.

Adicionando uma classe

Usamos classList.add:

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

Isso adiciona a classe ativo ao elemento.

Removendo uma classe

Usamos classList.remove:

 caixa.classList.remove("ativo"); 

Alternando classes (toggle)

O método mais usado no dia a dia é toggle.

Ele:

• Adiciona a classe se não existir
• Remove a classe se já existir

 caixa.classList.toggle("ativo"); 

Perfeito para:

• Menus
• Modais
• Botões on/off

Verificando se uma classe existe

Podemos verificar se um elemento possui uma classe usando contains.

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

 console.log("A caixa está ativa"); // Saída será exibida se a classe existir 

Exemplo real: botão que ativa/desativa

HTML:

 <button id="btn">Ativar</button> <div id="painel">Painel</div> 

CSS:

 .painel-ativo { background: #428bca; color: white; padding: 10px; } 

JavaScript:

 const botao = document.getElementById("btn"); const painel = document.getElementById("painel");

botao.addEventListener("click", () => {
painel.classList.toggle("painel-ativo");
});

Aqui, o JavaScript apenas controla o comportamento — o visual fica todo no CSS.

Classes e delegação de eventos

Manipulação de classes combina perfeitamente com delegação:

 document.body.addEventListener("click", (event) => { if (event.target.classList.contains("item")) { event.target.classList.toggle("selecionado"); } }); 

Boas práticas importantes

• Evite style direto no JavaScript
• Use nomes de classes semânticos
• Deixe o CSS cuidar do visual
• Use classList sempre que possível

Com isso, fechamos um bloco essencial de DOM moderno. A partir daqui, você tem base sólida para interfaces interativas e profissionais 🚀