Detectar se um elemento contém uma classe com JavaScript

Neste artigo você vai aprender a como detectar se um elemento contém um classe com JavaScript, as famosas classes de CSS que são inseridas no HTML

Fala programador(a), beleza? Bora aprender mais sobre como extrair o atributo classes dos elementos HTML com JavaScript!

Primeiramente é interessante conhecer a propriedade classList, que todo elemento possui quando acessado por JavaScript

Esta propriedade nos dá acesso a diversos métodos que vão auxiliar nosso trabalho com classes

Inclusive saber se um elemento possui uma determinada classe ou não 😀

Para este fim utilizaremos o método contains, veja um exemplo prático:

<div id="container-a" class="teste"></div>
<div id="container-b"></div>

Neste exemplo, temos dois containers que um possui uma classe teste e o outro não

Agora vamos verificar com contains cada um dos elementos:

var containerA = document.getElementById("container-a");
var containerB = document.getElementById("container-b");

console.log(containerA.classList.contains("teste")); // true
console.log(containerB.classList.contains("teste")); // false

Como exibido no exemplo, receberemos um boolean com true, caso a classe existir no elemento, e false, caso não existir

Como dito anteriormente podemos utilizar o classList para diversos fins, veja alguns exemplos:

• método add: adiciona uma classe;
• método remove: remove uma classe;
• método toggle: remove ou adiciona uma classe, dependendo se ela está no elemento alvo

Conclusão

Neste artigo vimos como detectar se um elemento contém uma classe

Utilizamos a propriedade classList, que contém diversos métodos úteis para trabalharmos com classe

E é claro, precisamos selecionar o elemento alvo primeiro, que neste caso utilizamos o método getElementById

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube