.jpg)
🌍 Academy Code Christ está disponível em vários idiomas.
Fique à vontade para usar o tradutor na Barra lateral (Sidebar) e aprender no seu idioma.
📚 Continue sua jornada de aprendizado
%20-%20Copia.png)
A Academy Code Christ oferece trilhas de aprendizado em diferentes tecnologias. Explore os cursos, acompanhe as aulas e avance em sua jornada de conhecimento.
📋 Menus correspondentes:
.png)
💻 Pratique o que você aprende
%20-%20Copia.png)
.png)
.png)
Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.
🚀 Etapa 10
Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.
Manipulando Estilos com a Propriedade .style
Toda tag
HTML possui uma propriedade .style que permite definir ou alterar
qualquer valor CSS em tempo real.
Exemplo básico:
<h1
id="titulo">Clique para mudar o estilo!</h1>
<script>
const titulo =
document.getElementById("titulo");
titulo.addEventListener("click", ()
=> {
titulo.style.color = "white";
titulo.style.backgroundColor =
"darkblue";
titulo.style.padding = "10px";
titulo.style.borderRadius =
"8px";
});
</script>
💡
Observação: nomes CSS com hífen (background-color) se tornam camelCase (backgroundColor) no JavaScript.
🎨
Alterando Estilos Dinamicamente
Você pode
criar funções que modificam o estilo conforme eventos ocorrem.
Exemplo — Mudar cor ao passar o mouse
<div
id="caixa"
style="width:200px;height:200px;background:tomato;"></div>
<script>
const caixa =
document.getElementById("caixa");
caixa.addEventListener("mouseover",
() => {
caixa.style.background =
"limegreen";
});
caixa.addEventListener("mouseout",
() => {
caixa.style.background =
"tomato";
});
</script>
🧠
Assim, você cria feedbacks visuais — fundamentais para usabilidade.
⚙️
Usando .style
com Valores Dinâmicos
Os estilos
também podem ser controlados com valores variáveis ou funções.
Exemplo — Mudar tamanho com botões
<h2
id="texto">Aumente ou diminua meu tamanho!</h2>
<button
id="aumentar">A+</button>
<button
id="diminuir">A-</button>
<script>
const texto
= document.getElementById("texto");
let
tamanho = 16; // tamanho inicial em px
document.getElementById("aumentar").addEventListener("click",
() => {
tamanho += 2;
texto.style.fontSize = `${tamanho}px`;
});
document.getElementById("diminuir").addEventListener("click",
() => {
tamanho -= 2;
texto.style.fontSize = `${tamanho}px`;
});
</script>
💬
O conteúdo cresce ou diminui com cada clique — controle total de estilo pelo
JS.
🧩
Manipulando Classes com .classList
Em vez de
alterar várias propriedades manualmente, é muito mais prático ativar ou
desativar classes CSS já definidas.
Propriedades e métodos úteis:
|
Método |
O que faz |
|
.add("classe") |
Adiciona
a classe informada |
|
.remove("classe") |
Remove
uma classe existente |
|
.toggle("classe") |
Adiciona
se não existir, remove se já existir |
|
.contains("classe") |
Retorna
true se a classe estiver ativa |
Exemplo prático:
<div
id="box" class="quadrado"></div>
<button
id="mudar">Mudar cor</button>
<style>
.quadrado {
width: 200px;
height: 200px;
background-color: steelblue;
transition: background 0.5s;
}
.ativo {
background-color: orange;
}
</style>
<script>
const box
= document.getElementById("box");
document.getElementById("mudar").addEventListener("click",
() => {
box.classList.toggle("ativo");
});
</script>
💡
O .toggle()
faz alternar entre azul e laranja em cada clique.
💡
Exemplo — Alternância de Tema (Claro / Escuro)
Um dos
usos mais populares do .classList.toggle() é mudar o tema do site.
<button
id="alternarTema">Alternar Tema</button>
<style>
body {
background-color: white;
color: black;
transition: background 0.5s, color 0.5s;
}
.dark {
background-color: #121212;
color: white;
}
</style>
<script>
const
botao = document.getElementById("alternarTema");
botao.addEventListener("click",
() => {
document.body.classList.toggle("dark");
});
</script>
💬
A cada clique, o site troca automaticamente entre o tema claro e escuro
— uma prática muito usada em sites e apps modernos.
🧮
Verificando Classes Ativas
Você
também pode verificar se um elemento tem determinada classe, e agir de acordo.
<div
id="caixa" class="azul"></div>
<button
id="verificar">Verificar cor</button>
<style>
.azul { background: blue; width: 100px;
height: 100px; }
.vermelha { background: red; }
</style>
<script>
const
caixa = document.getElementById("caixa");
const
botao = document.getElementById("verificar");
botao.addEventListener("click",
() => {
if
(caixa.classList.contains("azul")) {
caixa.classList.replace("azul",
"vermelha");
} else {
caixa.classList.replace("vermelha", "azul");
}
});
</script>
💬
Aqui usamos também .replace(), que troca uma classe pela outra diretamente.
🧠
Manipulando Classes para Animações
Você pode
acionar animações CSS inteiras simplesmente adicionando uma classe pelo
JavaScript.
<div
id="bola"></div>
<button
id="animar">Animar!</button>
<style>
#bola {
width: 100px;
height: 100px;
background: crimson;
border-radius: 50%;
margin: 50px auto;
transition: transform 1s;
}
.mover {
transform: translateY(150px);
}
</style>
<script>
const bola
= document.getElementById("bola");
document.getElementById("animar").addEventListener("click",
() => {
bola.classList.toggle("mover");
});
</script>
💬
JavaScript apenas liga/desliga a classe — o CSS faz toda a mágica da animação!
⚡
Manipulando Estilos Calculados
Nem sempre
você sabe qual valor CSS está definido. Para isso, use getComputedStyle().
<p
id="texto">Texto de exemplo</p>
<script>
const
texto = document.getElementById("texto");
const
estilos = getComputedStyle(texto);
console.log("Cor:",
estilos.color);
console.log("Tamanho:",
estilos.fontSize);
</script>
💡
Retorna os estilos finais (inclusive os vindos do CSS externo ou herdado).
🧩
Combinação de Funções + DOM + Classes
Vamos
criar um mini efeito de destaque:
<p
id="mensagem">Passe o mouse sobre mim!</p>
<style>
#mensagem {
transition: color 0.3s, font-size 0.3s;
}
.destaque {
color: tomato;
font-size: 24px;
}
</style>
<script>
const
mensagem = document.getElementById("mensagem");
mensagem.addEventListener("mouseover",
() => {
mensagem.classList.add("destaque");
});
mensagem.addEventListener("mouseout",
() => {
mensagem.classList.remove("destaque");
});
</script>
💬
Esse tipo de interação deixa a experiência do usuário muito mais agradável.
🧮
Exemplo Prático Modo de Leitura
Vamos
criar um modo que muda o tamanho do texto e o contraste da página.
<h1>Artigo:
Aprendendo JavaScript</h1>
<p
id="conteudo">
O DOM representa toda a estrutura de uma
página, permitindo que o JavaScript controle conteúdo e aparência.
</p>
<button
id="modoLeitura">Ativar Modo Leitura</button>
<style>
.leitura {
background-color: #222;
color: #f4f4f4;
line-height: 1.8;
font-size: 20px;
padding: 20px;
}
</style>
<script>
const
botao = document.getElementById("modoLeitura");
botao.addEventListener("click",
() => {
document.body.classList.toggle("leitura");
});
</script>
💡
Você criou um modo leitura noturno, usado em blogs e plataformas de
leitura.
🎯
Boas Práticas
✔️ Evite
alterar diretamente muitas propriedades com .style (use classes);
✔️ Centralize estilos em CSS, e
use o JS apenas para ativar/desativar;
✔️ Sempre use transitions ou animations
para efeitos suaves;
✔️ Use nomes de classes descritivos (.ativo, .erro, .darkmode, etc.);
✔️ Combine .classList com eventos para respostas inteligentes.
🧠
Exercício Prático
Crie um botão
que mude completamente o layout da página, alternando entre dois temas:
●
Layout padrão: fundo claro, texto preto;
● Layout noturno:
fundo escuro, texto branco, fonte maior.
💬 Dica:
Use body.classList.toggle('darkmode').
✨ Conclusão
Agora você
domina a estética dinâmica do JavaScript — consegue transformar estilos
e temas com apenas algumas linhas de código.
A próxima etapa será levar essa interatividade ainda mais longe, aprendendo como armazenar dados (variáveis, listas e objetos) para criar aplicações que guardam informações e se tornam interativas de verdade.
📚 Continue aprendendo JavaScript:
🚀 Etapa 01 👉 O que é JavaScript e como funciona no navegador
🚀 Etapa 02 👉 Como inserir JavaScript no HTML
🚀 Etapa 03 👉 Variáveis, Tipos de Dados e Comentários
🚀 Etapa 04 👉 Operadores Aritméticos, Relacionais e Lógicos
🚀 Etapa 05 👉 Estruturas Condicionais
🚀 Etapa 06 👉 Laços de Repetição
🚀 Etapa 07 👉 Funções
🚀 Etapa 08 👉 Eventos
🚀 Etapa 09 👉 O DOM
🚀 Etapa 10 👉 Você está nessa Etapa
🚀 Etapa 11 👉 O DOM: Acessando e Manipulando Elementos HTML
🚀 Etapa 12 👉 Arrays, Objetos e Estruturas de Dados
🚀 Etapa 13 👉 O que é o LocalStorage e o SessionStorage
🚀 Etapa 14 👉 Mini Projeto: Gerenciador de Tarefas Inteligente
🚀 Etapa 01 👉 O que é JavaScript e como funciona no navegador
.png)
.png)
Postar um comentário