28.11.2024

Adicionando e Removendo Classes em JavaScript sem jQuery

Resposta Rápida

Se você precisa alternar classes, use a API classList:

Adicionar Classe:

elemento.classList.add("classe-a-adicionar");

Remover Classe:

elemento.classList.remove("classe-a-remover");

Essa API oferece uma gestão eficiente das classes em elementos do DOM, permitindo que você evite o uso do jQuery.

Adaptação do Navegador: Alterações de Tempo

classList é uma parte integral dos navegadores modernos, mas pode haver problemas com navegadores mais antigos, como o IE8, que não suportam classList. Nesses casos, é recomendável recorrer às capacidades do JavaScript.

Adicionar Classe:

var elemento = document.getElementById("div1");
if (elemento.className.indexOf("classeAAdicionar") === -1) {
    elemento.className += " classeAAdicionar";
}

Remover Classe:

var elemento = document.getElementById("div1");
elemento.className = elemento.className.replace(/classeARemover/g, "");

Para oferecer suporte a navegadores mais antigos, é recomendável usar polyfills para classList.

O Mundo das Alternâncias

Aprimore sua alternância de classes com classList.toggle usando expressões condicionais:

Alternar:

elemento.classList.toggle("classe-a-alternar", condicao);

Aqui, condicao atua como um controlador: se true, a classe é adicionada; se false, a classe é removida.

Segurança em Primeiro Lugar

Tenha cuidado especial ao trabalhar com nomes de classes obtidos de usuários para evitar ataques de injeção de CSS.

Desempenho em Primeiro Lugar

Uma gestão cuidadosa de classes pode ajudar a evitar problemas de desempenho. Embora os métodos classList sejam bem otimizados, renderizações complexas ou loops pesados podem sobrecarregar o navegador.

Visualização

Vamos usar um guarda-roupa como exemplo para demonstrar visualmente o processo de adição e remoção de classes:

Guarda-Roupa (🚪) antes:
Lista de Classes: ["calças", "camiseta"]

Adicionar uma classe é como adicionar um novo chapéu:

elemento.classList.add("chapéu");

Guarda-Roupa (🚪) após adicionar:
Lista de Classes: ["calças", "camiseta", "chapéu"]

Remover uma classe é como se livrar de um velho cachecol:

elemento.classList.remove("cachecol");

Guarda-Roupa (🚪) após remover:
Lista de Classes: ["calças", "camiseta", "chapéu"]

Gerenciar classes é tão simples quanto escolher um traje do seu guarda-roupa!

Explorando Métodos Não Tradicionais

classList pode ser utilizado de várias maneiras, por exemplo, em conjunto com className:

Definir Classes:

elemento.className = "classe1 classe2 classe3";

Verificar Presença de Classe:

if (elemento.className.split(' ').includes("classeAVerificar")) {
    // A classe está presente, hora de comemorar!
}

Embora a propriedade className possa parecer menos atraente, ela oferece funções essenciais para trabalhar com classes sem a necessidade de bibliotecas externas.

Dicas e Armadilhas

Para garantir que sua jornada no mundo das classes seja tranquila, mantenha em mente algumas recomendações e potenciais armadilhas:

Múltiplas Classes: classList permite que você gerencie várias classes de uma vez:

elemento.classList.add("classe-um", "classe-dois");
elemento.classList.remove("classe-tres", "classe-quatro");

Armadilha #1 - Espaços Inesperados: Tenha cuidado para não inserir espaços extras nos nomes das classes, pois isso pode levar a problemas inesperados.

Armadilha #2 - Exclusividade das Classes: O JavaScript não se importará se encontrar vários nomes de classes idênticos, entretanto, para evitar problemas de estilo, é essencial manter sua exclusividade.

Recursos Úteis

1. Element: classList property - Web APIs | MDN — Documentação oficial para trabalhar com classes no MDN.
2. HTML DOM Element classList Property — Visão geral de classList com exemplos práticos.
3. html - Como posso mudar a classe de um elemento usando JavaScript? - Stack Overflow — Principais respostas no Stack Overflow sobre edição de classes.
4. Dica Rápida: Como adicionar ou remover uma classe CSS usando JavaScript puro — SitePoint — Guia passo a passo para gerenciar classes usando JavaScript puro.
5. html - Como remover uma classe CSS de um elemento usando JavaScript (sem jQuery) - Stack Overflow — Discussão sobre como remover classes sem usar bibliotecas externas.
6. Sintaxe Básica de Classe — Dominar o trabalho com classes em JavaScript começa com o aprendizado sobre classList.

Video

Navigation