Verifique se um elemento contém uma classe em JavaScript

O uso de classes no HTML permite que os elementos sejam agrupados e tenham o mesmo estilo ou funcionalidade. Como resultado, mudar o comportamento de todos os elementos que participam de uma classe é tão fácil quanto escrever ou alterar uma única linha de código. Em alguns casos, como atualizar um estilo, os usuários podem precisar verificar se uma classe em particular faz parte de um elemento ou não.

Este tutorial ilustrará como verificar se o elemento contém uma classe em javascript.

Como verificar se um elemento contém uma classe em javascript?

Para verificar se um elemento contém uma classe, use os seguintes métodos:

• Método contém ()
• Método Matches ()

Vamos entender o funcionamento desses métodos individualmente.

Método 1: Verifique se um elemento contém uma classe usando o método contém ()

O "contém ()”Método do“Lista de classe”O objeto pode ser usado para verificar se um elemento tem um nome de classe específico. É um dos métodos mais populares utilizados para determinar a classe de um elemento.

Sintaxe
Siga a sintaxe dada para o método contains ():

elemento.Lista de classe.Contém ('Class-Name')

Aqui,

• ““elemento”É um elemento HTML que será verificado se contém esta classe específica.
• O "nome da classe”Identifique o nome da classe CSS que o elemento faz parte de

Valor de retorno
Se o elemento tiver o nome da classe, ele retorna “verdadeiro", Caso contrário, devolve"falso”.

Exemplo
Crie um botão com as aulas “Butronsize" e "Buttonstyle”Para estilizar o botão. Anexe um “ONCLICK”Evento com o botão que aciona a função para verificar se a classe especificada faz parte do elemento do botão ou não:

Botão

Antes do código JavaScript, a saída será assim:

Em um arquivo JavaScript, basta escrever estas linhas de código:

função classCheck ()
const elementClass = documento.QuerySelector ('Button');
if (ElementClass.Lista de classe.contém ('buttonstyle'))
alerta ("sim! O botão contém essa classe 'Buttonstyle');

No código acima:

• Defina uma função “ClassCheck ()”Isso será acionado no botão Clique.
• Em seguida, busque o botão usando o “QuerySelector ()”Método e armazene -o em uma variável“ElementClass”.
• Ligar para "contém ()”Método, passando um nome de classe específico como“Buttonstyle”Que verificará se faz parte do botão ou não.
• Se retornar “verdadeiro”, Uma mensagem de alerta será exibida:

Saída

A saída acima indica que, quando o botão é clicado, mostra que ele tem um “Buttonstyle" aula.

Método 2: Verifique se um elemento contém uma classe usando o método Matches ()

Há outro método, “partidas()”, Isso determinará se o elemento tem uma classe específica ou não. É preciso um único parâmetro, o nome da classe, para verificar se o elemento contém essa classe ou não.

Sintaxe
A sintaxe a seguir é utilizada para o método Matches ():

elemento.partidas('.nome da classe')

Na sintaxe acima,

• O "elemento”É um elemento html que será verificado se contém essa classe específica ou não.
• O "nome da classe”Indica o nome da classe CSS que o elemento faz parte de. O nome da classe é passado para o método Matches () com um ponto (.) que identifica “aula”.

Valor de retorno
Também retorna “verdadeiro“Se o elemento ou tiver uma classe mais,“falso”É devolvido.

Exemplo
Em um arquivo JavaScript, use as linhas de código fornecidas para verificar se o elemento tem a classe específica ou não chamando o método Matches ():

função classCheck ()
const elementClass = documento.QuerySelector ('Button');
if (ElementClass.partidas('.ButtonStyle '))
alerta ("sim! O botão contém essa classe 'Buttonstyle');

No trecho de código acima:

• Primeiro, defina uma função “ClassCheck ()”Isso será acionado no botão Clique.
• Em seguida, busque o botão usando o “QuerySelector ()”Método e armazene -o em uma variável“ElementClass”.
• Ligar para "partidas()”Método, passando um nome de classe específico como aqui,“Buttonstyle”Com um ponto (.) antes dele, o que indicará que é a classe e verifique se faz parte do botão ou não.
• Se o método Matches () retornar “verdadeiro", Uma mensagem de alerta"Sim! O botão contém esta classe 'Buttonstyle'" será exibido:

Saída

Conclusão

Para verificar se um elemento contém uma classe, use o JavaScript “contém ()”Método ou o“partidas()”Método. O método contains () é o método mais usado para determinar a classe do elemento. Ambos os métodos retornam “verdadeiro"Se o elemento tiver uma classe mais"falso”É devolvido. Este tutorial ilustrou como verificar se um elemento contém uma classe em javascript ou não com exemplos detalhados.