Manipulando estilos CSS: mudando a 'roupa' da página com JavaScript

Aprenda a alterar cores, tamanhos e outras propriedades visuais dos elementos.

Se o HTML é o esqueleto da página, o CSS é a roupa.
E com JavaScript, você consegue trocar essa roupa em tempo real.

Isso significa que dá para mudar cor, tamanho, espaçamento, borda, fundo e muito mais enquanto o usuário interage com a página.

Por que isso é útil?

Manipular estilos via JavaScript ajuda a:

  • destacar mensagens importantes
  • mostrar erro/sucesso em formulários
  • criar efeitos visuais em cliques
  • esconder e mostrar elementos
  • adaptar aparência conforme ações do usuário

Jeito 1: alterando estilo direto com .style

Você pode mudar propriedades CSS diretamente no elemento.

<p id="mensagem">Olá!</p>

const mensagem = document.getElementById("mensagem");

mensagem.style.color = "blue";
mensagem.style.fontSize = "24px";
mensagem.style.backgroundColor = "#f0f0f0";

Regra importante: CSS em JavaScript usa camelCase

No CSS normal, usamos hífen:

  • background-color
  • font-size

No JavaScript, vira camelCase:

  • backgroundColor
  • fontSize

Exemplo com clique

<button id="tema">Trocar tema</button>
<div id="caixa">Conteúdo</div>

const tema = document.getElementById("tema");
const caixa = document.getElementById("caixa");

tema.addEventListener("click", function () {
  caixa.style.backgroundColor = "#222";
  caixa.style.color = "#fff";
  caixa.style.padding = "16px";
  caixa.style.borderRadius = "8px";
});

Ao clicar no botão, a aparência muda na hora.

Jeito 2 (melhor para projetos): trocar classes CSS

Alterar muitos estilos com .style pode deixar o código repetitivo.
Em muitos casos, é melhor criar classes no CSS e só adicionar/remover com JavaScript.

.escuro {
  background-color: #222;
  color: #fff;
  padding: 16px;
  border-radius: 8px;
}

caixa.classList.add("escuro");

Essa abordagem costuma ser mais organizada e escalável.

Mostrar e esconder elementos

Também é comum alterar visibilidade:

caixa.style.display = "none";   // esconde
caixa.style.display = "block";  // mostra

Cuidado com exagero de estilo inline

.style cria estilo inline no elemento.
Se usado demais, pode dificultar manutenção.

Boa prática:

  • pequenas mudanças pontuais: .style
  • mudanças visuais maiores: classList + CSS

Resumo da lição

  • JavaScript pode mudar a “roupa” da página em tempo real.
  • Use .style para ajustes rápidos.
  • No JS, propriedades CSS ficam em camelCase.
  • Para mudanças grandes, prefira trocar classes com classList.
  • Essa combinação deixa a interface dinâmica e organizada.