Olá,

Segue um mini-tutorial de como manipular classes usando Javascript (core)

Este tutorial é compatível com IE10+, poderia fazer até para o IE8+, porém sou adepto da campanha para os usuários atualizarem seus navegadores, portanto, se precisar de suporte para o IE8+, é melhor fazer uma pesquisa na internet...

Usando jQuery, usariamos as seguintes propriedades:

Código:

$('.element').addClass('classname');
$('.element').removeClass('classname');
$('.element').toggleClass('classname');
$('.element').hasClass('classname');

Para quem vai fazer um projeto com Javascript core, e não tem acesso a frameworks (ou não quer usar), podemos usar o seguinte:

Código:


var element = document.querySelector('.element');

// Adicionar classes
element.classList.add('classname');

// adicionar multiplas classes
element.classList.add('classname', 'another-class');

// Remover classes
element.classList.remove('classname');

// Dar um "toggle" nas classes
element.classList.toggle('classname');

// Checar se um elemento tem uma determinada classe
if( element.classList.contains('classname') ) {
   // true
}

Muito simples né galera? Espero que seja útil

Muito util amigo.

Obrigado por compartilhar connosco.

Boa cara, aprendi com você essa, muito bom, obrigado mais uma vez.

E reforçando: Usar JavaScript puro torna a execução dos códigos bem mais rápida!!!

★★★★★

JS

Muito bom Wagh, curti

Eu estava revendo o tópico e vi que a vantagem do jQuery é que ele é cross browser e com isso não precisamos escrever tanto...

Eu considero JavaScript puro como o Assembly e jQuery como C

JS

Sim @JScript, mas nada que um pequeno "snippet" bem trabalhado não faça, não é? Apesar que não muda muita coisa não, veja um código funcional em IE8 seria semelhante a isso

Código:


if (el.classList)
  el.classList.add(className);
else
  el.className += ' ' + className;

Sim, com certeza e devemos usar principalmente em loops e funções repetitivas pois a velocidade de execução será bem maior!

JS