JavaScript: Estilos no DOM

Última atualização: 2026-10-13

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.

Métodos DOM relacionados：element.style classList class

1. 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>

⚠️ Nota: 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.

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>

2. 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.

(1) 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>

💡 Dica: 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.

(2) 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

▶ Experimente

▶ Exemplo: Mostrar e Esconder

▶ Experimente

3. 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>

💡 Dica: 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

▶ Experimente

4. 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>

⚠️ Nota: Atribuir a cssText substitui todos os estilos inline existentes. Para adicionar, use +=: element.style.cssText += '; color: red;'.

▶ Exemplo: Estilização em Lote com cssText

▶ Experimente

Métodos DOM relacionados：element.style classList class

❓ 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.

📖 Resumo

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

📝 Exercícios

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.
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.
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.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós