Alterando o Estilo de Elementos - 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 complexo 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