🚀 Capítulo 05: Manipulando Classes
🎯 Objetivo da Aula
Ao final desta aula, você saberá como adicionar, remover e alternar classes CSS em um elemento usando o objeto classList.
🏢 O Cenário Prático (Seu Desafio)
Ficar mudando estilo por estilo no JavaScript dá muito trabalho. É melhor criar uma classe no CSS chamada .modo-ataque e apenas ligar essa classe na nave inteira! Seu desafio é fazer isso usando o classList.
🧠 Fundamentos: A Teoria Traduzida
A forma mais profissional de mudar o visual de um elemento no JavaScript não é mexer no style, mas sim mexer nas classes dele.
Usamos o objeto classList que tem 3 métodos principais:
add('classe'): Adiciona a classe.remove('classe'): Remove a classe.toggle('classe'): Alterna. Se a classe não existir, ele adiciona. Se já existir, ele remove! (Perfeito para botões de liga/desliga).
📖 Exemplo Guiado: Modo de Ataque
No CSS:
.modo-ataque {
background-color: red;
color: white;
}No JS:
const nave = document.querySelector('#nave');
// Ligando o modo de ataque
nave.classList.add('modo-ataque');🛠️ Prática Obrigatória 1
Crie uma classe no CSS e use o classList.add para aplicá-la a um elemento.
🛠️ Prática Obrigatória 2
Use o classList.toggle ligado a uma variável para ligar e desligar a classe.
🔑 Gabarito de Código/Fórmulas
Prática 1:
elemento.classList.add('minha-classe');