Gerenciamento de Classes

Do Básico ao Avançado: Curso Completo de Manipulação de DOM

Sobre a Aula

Gerenciamento de Classes

Vamos agora explorar o poder do gerenciamento de classes no mundo da manipulação de estilos no DOM. Manipular classes permite que você modifique o estilo de vários elementos de uma vez, facilitando a manutenção do seu código. Vamos direto aos detalhes!

Adicionando Classes com classList.add

Quando queremos aplicar um estilo específico a um elemento, adicionamos uma classe a ele. Vejamos um exemplo simples:

// Encontrando o elemento desejado
var meuElemento = document.getElementById('meuElemento');

// Adicionando a classe 'destaque'
meuElemento.classList.add('destaque');

Agora, se tivermos uma classe no CSS chamada .destaque, podemos definir estilos específicos para ela.

Removendo Classes com classList.remove

Se precisarmos remover uma classe, usamos classList.remove:

// Removendo a classe 'antigoEstilo'
meuElemento.classList.remove('antigoEstilo');

Isso é útil quando queremos substituir um estilo por outro.

Alternando Classes com classList.toggle

Se quisermos criar um interruptor para ligar e desligar um estilo, usamos classList.toggle:

// Alternando a classe 'ativo'
meuElemento.classList.toggle('ativo');

Isso é especialmente útil para criar funcionalidades como alternadores de temas.

Verificando a Presença de uma Classe com classList.contains

Se precisarmos verificar se um elemento tem ou não uma classe específica, utilizamos classList.contains:

// Verificando se o elemento possui a classe 'importante'
if (meuElemento.classList.contains('importante')) {
  // Faça algo importante aqui
}

Exemplo para melhorar a compreensão

Para aprimorar nossa compreensão do assunto, vamos criar um exemplo mais completo. Neste exemplo, teremos uma lista de itens que podem ser destacados ou removidos.

Ao clicar em um item, a classe de destaque será alternada, proporcionando uma experiência interativa. Vamos ao código!

HTML Básico:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo de Gerenciamento de Classes</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<ul id="minhaLista">
  <li onclick="alternarDestaque(this)">Item 1</li>
  <li onclick="alternarDestaque(this)">Item 2</li>
  <li onclick="alternarDestaque(this)">Item 3</li>
</ul>

<script src="script.js"></script>
</body>
</html>

CSS (styles.css):

.destaque {
  background-color: yellow;
  font-weight: bold;
  cursor: pointer;
}

JavaScript (script.js):

function alternarDestaque(elemento) {
  // Alternando a classe 'destaque' para o elemento clicado
  elemento.classList.toggle('destaque');
}

Visualização

Exemplo de Gerenciamento de Classes

Item 1
Item 2
Item 3

Neste exemplo, cada <li> na lista tem um evento onclick que chama a função alternarDestaque quando clicado. A função alternarDestaque usa classList.toggle para alternar a classe ‘destaque’ para o elemento clicado.

Ao clicar em um item da lista, você verá a mudança visual imediata, indicando que a classe de destaque foi aplicada ou removida.

O gerenciamento de classes é uma ferramenta poderosa que simplifica a manipulação de estilos no DOM. Experimente esses métodos no seu próprio código para ter uma compreensão mais prática.

No próximo módulo, exploraremos os eventos no DOM, permitindo interações dinâmicas com os usuários. Continue firme na sua jornada de aprendizado!

Siga-me

Entrar na conversa