JavaScript

Detectar se um elemento contém uma classe com JavaScript

8 de outubro de 2020

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

Detectar se um elemento contém uma classe

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

0
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x