Quero saber como adicionar e remover uma classe em elementos do HTML com JavaScript.
<div>
<ul>
<li class="Active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeExiste a API classList
, que é basicamente um DOMTokenList
que contém todas as classes de um determinado elemento.
A propriedade classList
pode ser acessada em objetos que implementam Element
.
Primeiro você obtém o elemento:
const element = document.querySelector('#my-element');
E depois pode...
Adicionar uma nova classe à lista:
element.classList.add('new-class');
Remover uma classe da lista:
element.classList.remove('new-class');
Trocar uma classe por outra:
element.classList.replace('old-class', 'new-class');
Fazer o toggle de uma classe. Isto é, adicionar a classe se não existir e, caso contrário, remover:
element.classList.toggle('is-active');
Como a propriedade classList
nada mais é que um DOMTokenList
, existem diversos outros métodos que podem ajudar em outras situações.
A vantagem da API classList
é que você não precisa modificar toda a string de classes diretamente (o que é necessário com a API className
). Ela também possui vários métodos que tornam o trabalho mais simples. Alguns deles foram demonstrados acima.
Sobre o suporte dessa API, consulte a tabela. Embora é mais recente que a API className
, o suporte para navegadores modernos já é relativamente bom.
Para remover a classe, defina a classe do elemento para vazio:
// Pega o primeiro li e remove a classe
document.getElementsByName("li")[0].className = "";
Se quiser manter alguma classe, resete a classe:
document.getElementsByName("li")[0].className = "";
document.getElementsByName("li")[0].className = "classe_que_fica";
Com JavaScript puro, pensei em algo como:
// Selecionando elemento no DOM
elemento = document.getElementsByName('li')[0];
// Limpando o atributo class
elemento.className = '';
// Se você quisesse remover uma classe específica, digamos que houvesse
// mais de uma classe no seu elemento (class="Active estilo1"):
element.className = element.className.replace('estilo1','');
// a linha de comando anterior, resultaria em class="Active ", o que
// significa que você retirou o texto correspondente da classe "estilo1".
// Para remover o espaço extra, pode utilizar .trim() :
element.className = element.className.trim();