Se estivermos trabalhando com aplicativos de front-end da web, alterar a classe de um elemento é algo que devemos fazer com frequência.

Neste artigo, veremos como alterar a classe de um elemento com JavaScript.

A propriedade classList

Um elemento tem a classListpropriedade de nos permitir manipular as classes que são aplicadas ao elemento.

Por exemplo, se tivermos um div:

<div>
  hello world
</div>

document.querySelector("div").classList.add('hello');

Se a helloclasse já estiver adicionada, nada será feito.

Para remover uma classe, podemos chamar o classList.removemétodo:

document.querySelector("div").classList.remove('hello');

document.querySelector("div").classList.contains('hello');

E para alternar a classe que é aplicada a um elemento, podemos chamar o classList.togglemétodo:

document.querySelector("div").classList.toggle('hello');

Caso contrário, a helloclasse será adicionada ao div.

Isso está disponível nos navegadores mais recentes.

A propriedade className

Outra maneira de manipular as classes de um elemento é manipular a classNamepropriedade string.

Por exemplo, podemos escrever:

document.querySelector("div").className = 'hello';

Para adicionar uma classe manipulando a classNamepropriedade, podemos escrever:

document.querySelector("div").className += ' hello';

Para remover a helloclasse, podemos usar o replacemétodo:

document.querySelector("div").className.replace(/(?:^|\s)hello(?!\S)/g, '')

O gsinalizador encontrará todas as instâncias deste e fará a substituição em todas elas.

Para descobrir se uma classe está no div, podemos escrever:

document.querySelector("div").className.match(/(?:^|\s)hello(?!\S)/)

Conclusão

A melhor e mais fácil maneira de manipular classes de um elemento HTML é usar a classListpropriedade.

Como alternativa, também podemos manipular a classNamepropriedade string para alterar o classatributo de um elemento.

Mais conteúdo em plainenglish.io