Manipular classes de CSS em elementos HTML é uma tarefa muito útil, e até corriqueira, para quem trabalha com JavaScript. Provavelmente, você já sabe como fazer isso com jQuery. Porém, o que nem todos sabem ainda, é que temos uma API nativa de JavaScript para executar essas tarefas.
Neste artigo vou lhe apresentar a classList API. Essa API é bem simples de ser utilizada, e é extremamente útil para diversas "brincadeiras".
Se você ainda não a conhece, verá que não é nada complicado manipular elementos dessa forma, mesmo sem utilizar bibliotecas como jQuery. Por outro lado, se você é um desenvolvedor experiente que já utiliza essa API no dia a dia, fique a vontade para deixar críticas e sugestões através dos comentários.
Todo objeto Element possui um objeto classList que retorna um DOMTokenList representando seu atributo class definido no documento HTML. O objeto classList possui uma propriedade length e é somente para leitura, porém podemos modificá-lo através de seus métodos, como add e remove. É aí que as coisas ficam interessantes.
Os métodos disponíveis em classList são:
- add
- remove
- toggle
- contains
Vamos considerar agora cada um desses métodos.
Para adicionar uma ou mais classes em um elemento HTML, basta selecioná-lo e chamar o método classList.add, passando uma String como argumento. É interessante notar que podemos adicionar multiplas classes de uma só vez. Para isso, informe os nomes das classes que deseja adicionar separados por vírugla. Exemplo:
// Selecionamos um elemento <span> no DOM:
var mySpan = document.querySelector( 'span' );
// Agora adicionamos a classe highlight para destacá-lo:
mySpan.classList.add( 'highlight' );
// Agora adicionamos mais três classes de uma só vez:
mySpan.classList.add( 'feature', 'label', 'label-primary' );Além de adicionar novas classes, vez por outra você vai precisar também remover classes já existentes. Para isso, temos o método classList.remove. Vale notar, que assim como o método add, podemos remover multiplas classes de uma só vez. Exemplo:
// Selecionamos um elemento <div> no DOM:
var myDiv = document.querySelector( 'div' );
// Supondo que esse <div> tenha a classe 'foo', 'bar' e 'baz',
// vamos remover a classe 'baz':
myDiv.classList.remove( 'baz' );
// Agora vamos remover as classes 'foo' e 'bar' ao mesmo tempo:
myDiv.classList.remove( 'foo', 'bar' );Para dar um comportamento mais dinâmico em nossa interface, pode ser interessante alternar (inserir e remover) uma classe, respondendo a um clique, toque na tela ou outro evento. Com isso, podemos fazer coisas como por exemplo exibir/ocultar um bloco de conteúdo, exibir/ocultar um menu, destacar/remover destaque de um elemento, entre várias outras coisas.
É aí que o método toggle entra em ação. Passamos o nome de uma classe para o método toggle, e ele fica responsável por checar se um elemento tem ou não essa classe. Se já tiver: ele remove, se não tiver: ele adiciona. Tudo "automagicamente" sem precisar escrever instruções if/else, expressões regulares ou coisa do tipo.
Para ver o método toggle funcionando, o ideal é registrarmos uma rotina de tratamento de eventos como comentei acima. No final do artigo, você encontra um exemplo assim. Mas a sintaxe desse método é a seguinte:
// Alterna a classe 'is-visible' no elemento 'myDiv':
myDiv.classList.toggle( 'is-visible' );Talvez você precise checar se um elemento possui determinada classe e dependendo do resultado, executar uma ou outra tarefa. Se esse for o caso, utilize o método classList.contains. Exemplo:
if( myDiv.classList.contains( 'is-visible' ) ) {
// Se o elemento 'myDiv' possui a classe 'is-visible':
// Faça alguma coisa interessante aqui.
} else {
// Se não...
// Faça alguma outra coisa aqui.
}Para que você possa visualizar melhor as coisas, fiz um exemplo bem simples onde você pode interagir com a classList API clicando nos botões. Ao testar o botão contains, repare a saída gerada no console.
<!-- Embed JS Bin -->
<a class="jsbin-embed" href="http://jsbin.com/mafix/1/embed?js,console,output">classList API</a>
<script src="http://static.jsbin.com/js/embed.js"></script>Ao aplicarmos a classList API (ou qualquer outro recurso) em nossos projetos, é sempre bom ficar atento em relação a quais browsers suportam ou não tal API ou recurso que queremos implementar, e então tomar as decisões corretas.
Para isso, gosto bastante do site Can I use.
Como podemos ver na tabela abaixo, o suporte à classList API é bem tranquilo em vários navegadores. Para variar um pouco, no IE só funciona a partir da versão 10+. Mas isso não é nenhuma surpresa né? :-P.
Mas fique tranquilo. Qualquer browser moderno aceita essa API, e se você precisa dar suporte aos navegadores mais antigos, pode usar algum polyfill disponível na Internet. Um deles você encontra na documentação da Mozilla Developer Network.
Agora você já sabe como manipular classes em seus documentos HTML de maneira muito fácil e sem depender de bibliotecas de terceiros. O suporte à essa API é muito bom em todos os browsers modernos e podemos utilizar polyfill para os que não oferecem suporte. API's nativas podem facilitar bastante nossa vida como desenvolvedores Web, basta conhece-las e colocar em prática.