🚀 Capítulo 04: Alterando Estilos
🎯 Objetivo da Aula
Ao final desta aula, você saberá como alterar as propriedades CSS de um elemento diretamente pelo JavaScript usando a propriedade style.
🏢 O Cenário Prático (Seu Desafio)
Para passar despercebido pelos radares do Império, você precisa mudar a cor das luzes do painel da nave para vermelho (modo furtivo)! Seu desafio é fazer isso usando o JavaScript.
🧠 Fundamentos: A Teoria Traduzida
Todo elemento do DOM tem uma propriedade chamada style. Ela permite que você mude qualquer regra de CSS daquele elemento.
- Regra de Ouro: No CSS usamos hífen (
background-color). No JavaScript usamos CamelCase (backgroundColor).
Exemplos:
- CSS:
color: red;→ JS:elemento.style.color = 'red'; - CSS:
background-color: blue;→ JS:elemento.style.backgroundColor = 'blue';
📖 Exemplo Guiado: Luzes de Emergência
const painel = document.querySelector('#painel');
// Mudando a cor do texto para vermelho
painel.style.color = 'red';
// Mudando a cor de fundo
painel.style.backgroundColor = '#1a1a1a';🛠️ Prática Obrigatória 1
Selecione um elemento e mude o tamanho da fonte dele para 30px usando o JS.
🛠️ Prática Obrigatória 2
Mude a cor de fundo do body inteiro para preto (#000).
🔑 Gabarito de Código/Fórmulas
Prática 2:
document.body.style.backgroundColor = '#000';