EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語
404 Not Found

404 Not Found

nginx

Estilos no DOM

Depois de aprender a mudar conteúdo e estrutura da página com JS, o próximo passo é controlar estilos — fazer elementos mudar de cor, mostrar/esconder ou trocar temas. CSS cuida de estilos estáticos, JS cuida de estilos dinâmicos, e juntos eles permitem interatividade.

Propriedade style

element.style corresponde ao estilo inline do HTML (style="..."). Só lê/escreve estilos inline — não consegue acessar regras definidas em arquivos CSS ou tags <style>.

HTML 
<div id="box">Olá Estilo</div>
<script>
const element = document.getElementById('box');
element.style.color = 'red';
element.style.fontSize = '20px';  // Obs: CSS font-size → JS fontSize
</script>
⚠️ Nomes de propriedades CSS com hífen devem ser convertidos para camelCase em JS: background-color → backgroundColor, font-size → fontSize. Esta é uma das armadilhas mais comuns para iniciantes.

Exemplo: Lendo e Escrevendo a Propriedade style

HTML 
<div id="box" style="color: blue;">Olá Estilo</div>

<script>
const box = document.getElementById('box');

console.log('Cor atual:', box.style.color);

box.style.color = 'red';
box.style.fontSize = '24px';
box.style.backgroundColor = '#f0f0f0';
box.style.padding = '10px';
box.style.borderRadius = '8px';
</script>
▶ Experimente

className e classList

Manipular a class de um elemento é a forma mais comum de mudar estilos com JS — você pré-define classes no CSS, e o JS apenas adiciona ou remove nomes de classes.

className

className é uma string, e atribuir a ela sobrescreve todas as classes existentes.

HTML 
<div id="demo1" class="item">Elemento 1</div>
<div id="demo2" class="item">Elemento 2</div>
<script>
const el1 = document.getElementById('demo1');
el1.className = 'active';        // Sobrescreve, apenas 'active' permanece

const el2 = document.getElementById('demo2');
el2.className += ' highlight';   // Adiciona, mas é primitivo e propenso a erros

console.log('el1.className:', el1.className);
console.log('el2.className:', el2.className);
</script>
💡 Atribuir className é como restaurar as configurações de fábrica do celular e depois instalar novos apps — tudo que havia antes some. Na maioria dos casos, classList é mais seguro.

classList

classList é um objeto DOMTokenList que fornece métodos para adicionar, remover e trocar classes sem afetar outras classes.

Método Descrição
add('cls') Adicionar classe
remove('cls') Remover classe
toggle('cls') Remover se presente, adicionar se ausente
contains('cls') Verificar se a classe existe, retorna booleano

Exemplo: Troca de Tema

HTML 
<style>
  .dark { background: #222; color: #fff; }
  .light { background: #fff; color: #222; }
  body { transition: background 0.3s, color 0.3s; padding: 20px; }
</style>

<body class="light">
  <h2>Demo de Troca de Tema</h2>
  <p>Clique no botão para alternar entre temas claro e escuro</p>
  <button id="toggleBtn">Trocar Tema</button>
</body>

<script>
const body = document.body;
const btn = document.getElementById('toggleBtn');

btn.addEventListener('click', function() {
  body.classList.toggle('dark');
  body.classList.toggle('light');
});
</script>
▶ Experimente

Exemplo: Mostrar e Esconder

HTML 
<style>
  .hidden { display: none; }
  .panel { border: 1px solid #ccc; padding: 15px; margin-top: 10px; }
</style>

<button id="togglePanel">Mostrar/Esconder Painel</button>
<div id="panel" class="panel">Este é o conteúdo do painel</div>

<script>
const panel = document.getElementById('panel');
const btn = document.getElementById('togglePanel');

btn.addEventListener('click', function() {
  panel.classList.toggle('hidden');
  btn.textContent = panel.classList.contains('hidden') ? 'Mostrar Painel' : 'Esconder Painel';
});
</script>
▶ Experimente

getComputedStyle

element.style só lê estilos inline. Como ler estilos definidos em arquivos CSS ou tags <style>? A resposta é getComputedStyle.

HTML 
<div id="box">Elemento de Teste</div>
<script>
const element = document.getElementById('box');
const style = window.getComputedStyle(element);
console.log(style.color);       // "rgb(0, 0, 0)"
console.log(style.fontSize);    // "16px"
</script>
💡 getComputedStyle retorna o estilo computado final do elemento — o resultado do navegador mesclando todas as fontes CSS (inline, tags style, arquivos CSS, herança). O valor retornado é somente leitura.

Exemplo: Obtendo Estilos Computados

HTML 
<style>
  #measured { font-size: 18px; color: green; margin: 20px; }
</style>

<div id="measured">Meça meus estilos</div>

<script>
const el = document.getElementById('measured');

console.log('cor do atributo style:', el.style.color);
console.log('cor do estilo computado:', getComputedStyle(el).color);
console.log('fontSize do estilo computado:', getComputedStyle(el).fontSize);
console.log('margem do estilo computado:', getComputedStyle(el).margin);
</script>
▶ Experimente

Estilização em Lote com cssText

Se você precisa definir múltiplos estilos inline em um elemento de uma vez, escrever style.xxx = ... linha por linha é verboso. cssText permite escrever tudo de uma vez.

HTML 
<div id="box">Estilização em Lote</div>
<script>
const element = document.getElementById('box');
element.style.cssText = 'color: red; font-size: 20px; padding: 10px;';
</script>
⚠️ Atribuir a cssText substitui todos os estilos inline existentes. Para adicionar, use +=: element.style.cssText += '; color: red;'.

Exemplo: Estilização em Lote com cssText

HTML 
<div id="box">Estilização em Lote</div>

<script>
const box = document.getElementById('box');
box.style.cssText = 'color: white; background: #4CAF50; padding: 15px; border-radius: 8px; font-size: 18px; text-align: center;';
</script>
▶ Experimente

📖 Resumo

  1. element.style só opera em estilos inline; não lê regras de arquivos CSS. Nomes de propriedades devem usar camelCase ao escrever.
  2. Atribuição de className sobrescreve todas as classes. Usar classList com add/remove/toggle é mais seguro.
  3. getComputedStyle lê o estilo computado final do elemento; o valor retornado é somente leitura.
  4. cssText define estilos inline em lote, mas a substituição substitui estilos inline existentes.

❓ Perguntas Frequentes

P: Por que element.style.color não consegue ler a cor definida em um arquivo CSS? R: A propriedade style corresponde apenas ao style="..." inline. Regras de arquivos CSS e tags <style> estão fora do seu escopo. Use getComputedStyle(element).color para ler o valor final.

P: classList.toggle pode adicionar ou remover condicionalmente? R: Sim. classList.toggle('cls', force) recebe um segundo parâmetro: true força adicionar, false força remover. É equivalente a force ? add : remove.

P: Devo usar style ou classList para modificar estilos? R: A regra é simples: use style para alterações de estilo temporárias e pontuais, use classList com classes CSS para troca de estado/tema. Este último mantém os estilos no CSS e a lógica no JS, facilitando a manutenção.

📝 Atividades

  1. Básico: Crie uma página com 3 botões (vermelho/verde/azul). Quando clicados, use style.backgroundColor para mudar a cor de fundo da página.
  2. Intermediário: Use classList.toggle para implementar um recurso de "destaque" — clique em um parágrafo para alternar uma classe de destaque (fundo amarelo), clique novamente para remover.
  3. Desafio: Implemente um simples "modo noturno" — alterne com um botão, use getComputedStyle para ler a cor de fundo atual e determinar o modo, e exiba "Modo atual: Dia/Noite" na página.
100%