Alterando o Estilo de Elementos do DOM em JavaScript

Para trabalhar com as propriedades de estilo dos elementos em JavaScript, são utilizados principalmente dois métodos:

Alteração da propriedade style
Alteração do valor do atributo class

Propriedade style

A propriedade style representa um objeto CSSStyleDeclaration e está diretamente associada ao atributo style do elemento HTML. Este objeto contém um conjunto de propriedades CSS, acessíveis da seguinte forma:

element.style.propriedadeCSS;

Por exemplo, para definir a cor do texto de um cabeçalho:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <h1 id="header">Home Page</h1>
    <script>
      const header = document.getElementById("header");
      console.log(header.style.color); // retorna uma string vazia
      header.style.color = "navy";
      console.log(header.style.color); // retorna "navy"
    </script>
  </body>
</html>

Neste caso, definimos a cor navy para o cabeçalho. A propriedade color em CSS tem o mesmo nome em JavaScript. Poderíamos também definir a cor através do CSS:

#header {
  color: navy;
}

Contudo, algumas propriedades CSS contêm hífens, como font-family. Em JavaScript, os hífens são omitidos, e a primeira letra após o hífen é capitalizada:

const header = document.getElementById("header");
header.style.fontFamily = "Verdana";

Propriedade className

A propriedade className permite obter ou definir o valor do atributo class de um elemento HTML. Por exemplo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
    <style>
      .header-color {
        color: navy;
      }
      .header-font {
        font-family: Verdana;
      }
    </style>
  </head>
  <body>
    <h1 id="header" class="header-font">Home Page</h1>
    <script>
      const header = document.getElementById("header");
      console.log(header.className); // retorna "header-font"
      header.className = "header-color";
      console.log(header.className); // retorna "header-color"
    </script>
  </body>
</html>

Inicialmente, obtemos a classe atual do cabeçalho e depois alteramos para uma nova classe, header-color. Usando classes, evitamos configurar cada propriedade CSS individualmente através da propriedade style.

É importante lembrar que o valor anterior do atributo class é removido. Assim, se precisarmos adicionar uma classe, devemos combiná-la com a classe existente:

header.className = header.className + " header-color";

Propriedade classList

A propriedade classList é mais conveniente para gerenciar múltiplas classes. Ela implementa os métodos:

add(className): adiciona a classe className
remove(className): remove a classe className
toggle(className): alterna a classe className. Se a classe existir, ela é removida; se não, é adicionada

Por exemplo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
    <style>
      .header-color { color: navy; }}
      .header-font { font-family: Verdana; }}
      .header-size { font-size: 22px; }}
    </style>
  </head>
  <body>
    <h1 id="header" class="header-size">Home Page</h1>
    <script>
      const header = document.getElementById("header");
      header.classList.remove("header-size");
      header.classList.add("header-font");
      header.classList.toggle("header-color");
    </script>
  </body>
</html>

O método toggle() também pode aceitar uma condição como segundo parâmetro. Se a condição for verdadeira (retornar true), a classe é alternada:

const random = Math.random();
const condition = random > 0.5;
const header = document.getElementById("header");
header.classList.toggle("header-color", condition);

Também é possível iterar sobre todas as classes na lista classList ou acessar classes individuais por índice:

for (const headerClass of header.classList) {
  console.log(headerClass);
}
console.log(header.classList[0]); // retorna a primeira classe adicionada