Simplificando a manipulação de classes CSS com classList em JavaScript

O atributo class no HTML pode ter muitas funcionalidades, como base de operação para o Javascript bem como estilização no CSS. Um atributo tão importante como esse precisa ser gerenciado com cuidado, afinal, a remoção indevida pode quebrar a nossa aplicação web.

A verdade é que gerenciar classes é algo relativamente simples de se fazer quando utilizamos o classList, uma funcionalidade do Javascript. Há outras formas de fazer isso, mas o processo pode ser um pouco mais longo e requer um cuidado maior.

Vamos ver no exemplo abaixo como podemos definir uma classe para um elemento e como remover usando a propriedade className.

    <p id="title">Hello, SatellaSoft!</p>

    <script>
        const title = document.querySelector('#title')

        //set
        title.className = 'text border'

        //remove border
        title.className = 'text'
    </script>

Perceba que no exemplo acima, a gente acessou o elemento p através do seletor id, em seguida, adicionamos a classe text e border. Para remover a classe border, tivemos que fazer novamente o uso do className omitindo a border e informando novamente a classe text.

Agora fica a pergunta, e se a gente precisasse saber se uma classe existe antes de adicionar ou remover outra? Utilizando o exemplo anterior, certamente iríamos fazer o uso do indexOf ou algo assim.

Entendendo o classList no Javascript

Antes de prosseguirmos com exemplos práticos do uso da propriedade classList, vamos entender o que podemos fazer com ela e o por quê de utilizá-la.

Acontece que utilizando esse recurso a gente pode facilmente verificar se uma classe existe, remover apenas uma classe e manter as outras intactas, assim como adicionar novas sem se preocupar com a estrutura existente. Em outras palavras, vamos remover e adicionar apenas o que definirmos.

Verificando se uma classe existe com classList

Podemos utilizar o método contains()  para verificar se uma classe existe ou não. O valor retornado é um booleano e ela espera o nome da classe como parâmetro, conforme mostra o exemplo abaixo.

const title = document.querySelector('#title')

const exists = title.classList.contains('title')

if(exists)
    alert('Existe')
else
    alert('Não tem')

Perceba que a gente fez o uso novamente da variável title que acessa o nosso elemento p. Note que classList só pode ser acessada através do nosso elemento, assim chamamos o método contains passando o valor title como parâmetro. Por fim, o resultado do contains é definido na variável exists que é analisada na estrutura if logo abaixo.

Adicionando uma nova classe com classList

O processo para adicionar uma nova classe é bem simples, faremos a utilização do método add, conforme mostra o exemplo abaixo.

const title = document.querySelector('#title')

title.classList.add('border')

Removendo uma classe com classList

Para remover uma classe, utilizamos o método remove, assim como o add e contains, ele espera como parâmetro o nome da classe a ser removida.

const title = document.querySelector('#title')
                
//Removemos
title.classList.remove('border')

Entendendo o método toggle da propriedade classList

Imagine que você queira exibir ou ocultar um elemento na página, como um menu, por exemplo, certamente a gente verificaria se a classe existiria para então removê-la, enquanto para exibir, verificamos se não existe para exibir, conforme mostra o código abaixo.

const menu = document.querySelector('.menu')

if (menu.classList.contains('show'))
    menu.classList.remove('show')
else
    menu.classList.add('show')

Embora o código acima esteja correto, ele certamente pode ser melhorado, mais especificamente com o uso do método toggle(), que basicamente remove uma classe se existir ou adicionar quando não existe, exatamente o que a gente quer. Veja o código abaixo como fica bem mais simples.

const menu = document.querySelector('.menu')

menu.classList.toggle('show')