Manipulação de Estilos e Classes via JavaScript
Bem-vindo(a) ao post no blog.
🧠 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.
Comentários
Postar um comentário