Alterar classes CSS em JavaScript

Para alterar a aparência de um elemento com JavaScript, selecione-o e atualize suas classes. Atribua className ao substituir o atributo de classe inteiro; use classList para adicionar, remover ou substituir tokens de classe individuais, preservando as outras classes. Um ouvinte de clique pode fazer a alteração em resposta a uma ação do leitor.

Várias maneiras de alterar uma classe CSS em JavaScript

A página completa abaixo atribui ao div o ID dimensions e usa classes CSS para controlar seu tamanho e seu plano de fundo. A classe inicial bg_1 define um plano de fundo carmesim. Clicar no elemento remove essa classe e adiciona bg_2, que define um plano de fundo verde-azulado. Você pode salvar a página como um arquivo HTML e abri-la em um navegador para ver a transição.

Usar a propriedade className

className é uma propriedade, não um método. Atribuir uma string a ela substitui todo o atributo de classe do elemento. Por exemplo, defini-la como "dimensions bg_2" altera o plano de fundo e mantém a classe de dimensionamento. Defini-la apenas como "bg_2" também removeria dimensions, portanto inclua todas as classes que o elemento deve manter. Essa abordagem é útil quando você quer definir deliberadamente o conjunto completo de classes, como ao aplicar um grupo conhecido de classes de estado de uma só vez.

Usar classList.remove e classList.add

classList é uma propriedade que expõe métodos para editar tokens de classe individuais. Chame classList.remove("bg_1") e classList.add("bg_2") para alterar as classes de plano de fundo sem perturbar dimensions ou outras classes não relacionadas. add não duplica um token que já está presente, e remove afeta apenas o token nomeado. Use essas operações quando um elemento tiver classes que devem permanecer no lugar, incluindo classes adicionadas por outros comportamentos da página.

Usar o método classList.replace()

classList.replace("bg_1", "bg_2") substitui um token por outro e deixa as outras classes intactas. A substituição só acontece quando bg_1 está presente; quando o token antigo está ausente, nenhum token é alterado. Escolha esse método quando um estado de classe corresponder diretamente a outro. Chamadas separadas de remove e add são úteis quando você quer tornar as duas operações explícitas ou quando o manipulador tem outro trabalho a fazer entre elas.

Aqui está uma página HTML completa, incluindo seus estilos, seu elemento e seu manipulador de clique. O pequeno adaptador JavaScript no final modela a mesma interação da página para que o exemplo também tenha um resultado de console determinístico; em um navegador, o script embutido da página cuida do clique real.

const html = `<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Change a CSS class</title>
  <style>
    .dimensions { width: 200px; height: 100px; }
    .bg_1 { background-color: crimson; }
    .bg_2 { background-color: teal; }
  </style>
</head>
<body>
  <div id="dimensions" class="dimensions bg_1">Click this box</div>
  <script>
    const element = document.getElementById("dimensions");
    element.addEventListener("click", () => {
      element.classList.remove("bg_1");
      element.classList.add("bg_2");
    });
  </script>
</body>
</html>`;

const element = {
  className: "dimensions bg_1",
  addEventListener(type, handler) {
    this.handler = handler;
  },
  classList: {
    remove(token) {
      element.className = element.className
        .split(" ")
        .filter((name) => name !== token)
        .join(" ");
    },
    add(token) {
      const names = element.className.split(" ");
      if (!names.includes(token)) names.push(token);
      element.className = names.join(" ");
    }
  }
};
const document = { getElementById: () => element };
const selected = document.getElementById("dimensions");
selected.addEventListener("click", () => {
  selected.classList.remove("bg_1");
  selected.classList.add("bg_2");
});
selected.handler();
console.log(selected.className);

dimensions bg_2

A parte do navegador mostra o padrão real do DOM: document.getElementById("dimensions") retorna o elemento, e addEventListener registra o retorno de chamada executado em um clique. O adaptador Node.js reproduz a alteração dos tokens de classe para a saída do console, já que o Node.js não fornece o DOM de uma página por padrão. A folha de estilo determina as cores visíveis; alterar apenas um nome de classe não tem efeito visual, a menos que exista uma regra CSS correspondente. Para uma substituição completa e direta, use className e liste todas as classes que devem ser mantidas. Para uma alteração direcionada que deixe intactas as classes de tamanho, layout e estados não relacionados, use os métodos de classList. Se o seu manipulador parecer não fazer nada, verifique se o ID corresponde e se as duas classes de plano de fundo estão definidas na folha de estilo da página.