Como mudar a classe de um elemento com JavaScript?

Usando a Propriedade className

A propriedade className muda a classe de um elemento. Para substituir todas as classes, use:

element.className = "newClass";

Para adicionar uma nova classe sem remover as existentes:

element.className += " newClass";

Para remover uma classe:

element.className = element.className.replace("classToRemove", "");

element.className = element.className.replace("classToRemove", "").trim();

Usando a API classList

A API classList oferece métodos para manipulação de classes:

// Adicionar uma classe
element.classList.add("newClass");

// Remover uma classe
element.classList.remove("oldClass");

// Alternar uma classe (adiciona se não estiver presente, remove se estiver presente)
element.classList.toggle("toggleClass");

Esses métodos funcionam em navegadores modernos, mas podem não funcionar em versões mais antigas do Internet Explorer. Para melhor compatibilidade, use um polyfill ou use a propriedade className.

Usando getElementById()

O método getElementById() seleciona um único elemento com base em seu atributo ID. Este método é rápido:

const element = document.getElementById('myElementId');

Este método funciona bem quando você precisa manipular um elemento específico em sua página. É útil para elementos que não mudam ou se movem em sua estrutura HTML.

Usando querySelector() e querySelectorAll()

Estes métodos oferecem mais opções para selecionar elementos:

querySelector() seleciona o primeiro elemento que corresponde ao seletor CSS:

const element = document.querySelector('.myClass');

querySelectorAll() seleciona todos os elementos que correspondem ao seletor, retornando uma NodeList:

const elements = document.querySelectorAll('.myClass');

Estes métodos permitem selecionar elementos usando diferentes critérios:

• Por classe: querySelector('.className')
• Por ID: querySelector('#idName')
• Por nome da tag: querySelector('div')
• Por atributo: querySelector('[data-attribute]')
• Por relação: querySelector('ul > li')

Você pode combinar seletores para um direcionamento mais específico:

const element = document.querySelector('div.myClass[data-attribute="value"]');

Estes métodos são úteis quando você precisa selecionar elementos com base em critérios complexos ou quando deseja manipular vários elementos de uma vez.

// Seleciona todos os parágrafos dentro de uma div com classe 'content'
const paragraphs = document.querySelectorAll('div.content p');

// Percorre os parágrafos selecionados e adiciona uma classe
paragraphs.forEach(paragraph => {
  paragraph.classList.add('highlighted');
});

Lidando com Eventos de Clique

Para alterar classes quando um usuário clica em um elemento, você pode usar o método addEventListener(). Este método adiciona um ouvinte de evento ao elemento, que executa uma função quando o evento ocorre.

Veja como alterar uma classe ao clicar:

const button = document.querySelector('#myButton');

button.addEventListener('click', function() {
  this.classList.toggle('active');
});

Neste exemplo, clicar no botão alterna a classe 'active'.

Você também pode usar funções de seta para ouvintes de eventos:

button.addEventListener('click', () => {
  button.classList.add('clicked');
});

Respondendo a Outros Eventos

Além de cliques, você pode responder a outros eventos para alterar classes:

1. Mouseover e mouseout:

const element = document.querySelector('#myElement');

element.addEventListener('mouseover', () => {
  element.classList.add('hovered');
});

element.addEventListener('mouseout', () => {
  element.classList.remove('hovered');
});

2. Pressionamento de tecla:

document.addEventListener('keypress', (event) => {
  if (event.key === 'Enter') {
    document.body.classList.toggle('dark-mode');
  }
});

3. Envio de formulário:

const form = document.querySelector('#myForm');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  form.classList.add('submitted');
});

4. Rolagem:

window.addEventListener('scroll', () => {
  const header = document.querySelector('header');
  if (window.scrollY > 100) {
    header.classList.add('scrolled');
  } else {
    header.classList.remove('scrolled');
  }
});

Estes exemplos mostram como usar eventos para acionar mudanças de classe. Combinando estes métodos, você pode criar páginas web dinâmicas que respondem às ações do usuário.

document.querySelector('#parentElement').addEventListener('click', (event) => {
  if (event.target.matches('.childClass')) {
    event.target.classList.toggle('active');
  }
});

const element = document.querySelector('#myElement');

element.addEventListener('dblclick', () => {
  element.classList.toggle('enlarged');
});