Estilos e Classes em JavaScript

Introdução

Há duas formas de alterar a aparência de um elemento a partir do JavaScript:

1. Adicionar ou remover uma classe CSS — o estilo fica na folha de estilos e o JavaScript apenas ativa ou desativa a classe. Esta é a abordagem preferida.
2. Definir um estilo inline diretamente no elemento com a propriedade style — útil quando o valor é calculado em tempo de execução (por exemplo, uma posição que depende do mouse).

Este capítulo abrange ambos: as APIs className e classList para trabalhar com classes, a propriedade style e cssText para estilos inline, e getComputedStyle para ler os estilos finais que o navegador realmente aplicou. Para uma visão mais ampla de CSS e o DOM, veja Trabalhando com Estilos no DOM.

A propriedade style

Manipulação Direta de Estilo

A propriedade style é um object cujas chaves são as propriedades CSS inline do elemento. Para modificar o estilo de um elemento diretamente pelo JavaScript, atribua um valor a uma dessas chaves. Veja um exemplo de como alterar a cor de fundo e o tamanho da fonte de um parágrafo:

<!-- snippet: html-result -->

<style>
  #myParagraph {
    color: white; /* Ensures text is readable on a blue background */
  }
</style>
<div id="myParagraph">This is a paragraph.</div>
<script>
document.getElementById("myParagraph").style.backgroundColor = "blue";
document.getElementById("myParagraph").style.fontSize = "16px";
</script>

Observe os nomes das propriedades: o CSS usa hífens (background-color, font-size), mas o object style usa camelCase (backgroundColor, fontSize). Propriedades com múltiplas palavras sempre seguem essa regra, e propriedades prefixadas mantêm o hífen inicial como letra maiúscula (-moz-border-radius vira MozBorderRadius). Os valores são sempre strings, e valores CSS numéricos devem incluir sua unidade — el.style.fontSize = "16px", não 16.

Definir el.style.backgroundColor escreve no atributo style="..." do elemento, afetando apenas aquele elemento e sobrepondo as regras da folha de estilos (tem o mesmo peso de um estilo inline de autor). Para remover um valor inline, atribua uma string vazia: el.style.fontSize = "".

Este método oferece controle direto, mas pode ser trabalhoso para múltiplas alterações de estilo.

Usando style.cssText

Para aplicar múltiplas alterações de estilo de forma eficiente, use style.cssText:

<!-- snippet: html-result -->

<style>
  #myParagraph {
    padding: 5px;
    width: 200px;
    text-align: center;
  }
</style>
<div id="myParagraph">Another paragraph.</div>
<script>
document.getElementById("myParagraph").style.cssText = "background-color: blue; font-size: 16px; border: 1px solid black";
</script>

Essa abordagem consolida as alterações de estilo em uma única operação. Esteja ciente de que cssText substitui todo o estilo inline, apagando quaisquer propriedades já definidas no elemento. Use-o quando quiser começar do zero; use atribuições individuais style.* quando quiser alterar uma propriedade e deixar as demais intactas.

Lendo estilos com getComputedStyle

A propriedade style reflete apenas os estilos inline — valores definidos no atributo style ou via JavaScript. Ela retorna uma string vazia para qualquer coisa proveniente de uma folha de estilos. Para ler o valor final e resolvido que o navegador realmente renderizou (de todas as folhas de estilos, regras inline e valores herdados), use getComputedStyle:

<!-- snippet: html-result -->

<style>
  #box { width: 10em; padding: 5px; }
</style>
<div id="box">Measure me</div>
<script>
const box = document.getElementById("box");
const styles = getComputedStyle(box);
// Computed values are resolved to absolute units (px), not the "10em" we wrote:
console.log(styles.width);   // "160px" (10em at the default 16px font size)
console.log(styles.padding); // "5px"
</script>

Algumas regras para lembrar:

• O object retornado é somente leitura — atribuir a ele não tem efeito; use element.style para alterar estilos.
• Os valores são resolvidos: comprimentos são retornados em pixels, cores no formato rgb(...).
• Sempre leia uma propriedade específica (getComputedStyle(el).marginTop) e prefira o nome completo — algumas propriedades abreviadas (margin, padding) são retornadas de forma inconsistente entre navegadores.

className vs classList

Há duas formas de ler e escrever as classes de um elemento:

• element.className é uma string única que contém o atributo class inteiro. Atribuir a ela substitui todas as classes de uma vez: el.className = "active warning". Útil para definir todas as classes do zero, mas trabalhoso para alterar apenas uma.
• element.classList é um object especial com métodos para trabalhar com classes individuais — add, remove, toggle, contains e replace. É o que você usará na maioria das vezes, pois permite alterar uma classe sem afetar as outras.

Os métodos são:

(A propriedade se chama className, não class, porque class é uma palavra reservada em JavaScript — veja Atributos e Propriedades.)

Adicionando e Removendo Classes

Usar a API classList facilita a manipulação de classes.

Adicionando uma Classe

<!-- snippet: html-result -->

<style>
  .new-class {
    font-weight: bold;
    color: green;
  }
</style>
<div id="myDiv">Class manipulation</div>
<script>
document.getElementById("myDiv").classList.add("new-class");
</script>

Removendo uma Classe

<!-- snippet: html-result -->

<style>
  .existing-class {
    text-decoration: underline;
    color: red;
  }
</style>
<div id="myDiv" class="existing-class">Another manipulation example</div>
<script>
document.getElementById("myDiv").classList.remove("existing-class");
</script>

Alternando uma Classe

A funcionalidade de alternância é eficaz para trocar estilos, como temas:

<!-- snippet: html-result -->

<style>
  .dark-mode {
    background-color: black;
    color: white;
  }
</style>
<button id="toggleButton">Toggle Dark Mode</button>
<script>
document.getElementById("toggleButton").addEventListener("click", function() {
  document.body.classList.toggle("dark-mode");
});
</script>

Gerenciando Múltiplas Classes

Gerencie várias classes simultaneamente:

<!-- snippet: html-result -->

<style>
  .first-class { background-color: yellow; }
  .second-class { border: 2px dashed blue; }
  .third-class { display: none; }
  .fourth-class { font-size: 14px; }
</style>
<div id="myDiv">Multiple class handling</div>
<script>
document.getElementById("myDiv").classList.add("first-class", "second-class");
document.getElementById("myDiv").classList.remove("third-class", "fourth-class");
</script>

Verificando e Substituindo Classes

Use contains para verificar se uma classe está presente e replace para trocar uma classe por outra em uma única chamada:

const el = document.getElementById("myDiv");

el.classList.contains("active"); // false

el.classList.add("active");
el.classList.contains("active"); // true

// Swap "active" for "disabled" (returns true if the swap happened):
el.classList.replace("active", "disabled"); // true
el.classList.contains("active");            // false
el.classList.contains("disabled");          // true

toggle também aceita um segundo argumento opcional que força o resultado: classList.toggle("open", isOpen) adiciona a classe quando isOpen é true e a remove quando é false, o que é conveniente quando o estado desejado já está em um boolean.

Boas Práticas: Classes vs. Estilos Inline

Prefira classes em vez de estilos inline. Mantenha o estilo no seu CSS e deixe o JavaScript apenas alternar o nome da classe. Isso separa apresentação e comportamento, para que designers possam mudar a aparência sem tocar nos scripts, a mesma classe pode ser reutilizada em muitos elementos, e seus estilos ficam em um único lugar pesquisável.

Recorra a element.style somente quando um valor genuinamente precisa ser calculado em tempo de execução — a posição de um elemento que segue o mouse, uma largura derivada de dados, uma cor escolhida pela entrada do usuário. Esses valores não podem existir em uma folha de estilos estática, então um valor inline é a ferramenta correta.

Quando uma mudança de classe deve animar em vez de ocorrer instantaneamente, defina um transition CSS na propriedade e deixe a alternância da classe conduzi-la. O navegador cuida da animação em seu próprio caminho otimizado, o que é mais suave do que alterar valores a partir do JavaScript. Veja Animações CSS para mais detalhes.

Conclusão

Use classList (add, remove, toggle, contains, replace) para gerenciar classes e deixe sua folha de estilos fazer o trabalho visual; recorra a element.style apenas para valores que precisam ser calculados em tempo de execução; e leia os valores finais aplicados com getComputedStyle — lembrando que é somente leitura. Manter o estilo no CSS e deixar o JavaScript alternar classes resulta em código mais fácil de manter e mais rápido de renderizar.

Prática