Esta postagem explicará os métodos para determinar se o event.target tem uma classe específica ou não usando JavaScript.
Como verificar se event.target tem uma classe específica usando JavaScript?
Para determinar se o event.target tem uma classe específica, use os seguintes métodos predefinidos de JavaScript:
Vamos ver como esses métodos funcionam para determinar a classe em um event.target.
Método 1: verifique se event.target tem uma classe específica usando o método contains()
Para determinar se um elemento pertence a uma classe específica, use o comando “ contém() ” método do “ lista de classe ”objeto. O método contains() é usado para identificar se um item especificado está presente na coleção. Suas saídas “ verdadeiro ” se o item estiver presente, senão, dá “ falso ”. É a maneira mais eficiente de determinar a classe de um elemento.
Sintaxe
Siga a sintaxe abaixo para determinar se o event.target tem uma classe específica ou não usando o método contains():
evento. alvo . lista de classe . contém ( 'nome da classe' )Na sintaxe acima:
- “ evento.alvo ” é um evento acionado que será verificado se contém a classe específica ou não.
- O ' nome da classe ” identifica o nome da classe CSS que faz parte do evento acionado.
Valor de retorno
Ele retorna “ verdadeiro ” se o evento acionado tiver a classe especificada; caso contrário, retorna “ falso ”.
Exemplo
Primeiro, crie três “ div ” elementos em um arquivo HTML usando o HTML Estilize os elementos usando estilo CSS. Para fazer isso, crie uma classe CSS “ .div ” para todos os elementos div: Crie um ' .Centro ” classe para definir os elementos no centro da página: Agora, para estilizar, cada div cria individualmente uma classe CSS para eles. Para o primeiro div, defina a cor de fundo “ vermelho ' no ' div1Style ' classe: Para o segundo div, defina a cor de fundo “ rabanete rosa ” usando o “ rgba(194, 54, 77) ” código no “ div2Style ' classe: Defina a cor de fundo “ rosa ” do terceiro div criando o “ div3Style ' classe: Depois de executar o código HTML acima, a saída ficará assim: Agora, em um arquivo JavaScript ou um “ roteiro ” use o código fornecido abaixo para verificar se o event.target tem uma classe específica ou não: No trecho de código acima: Resultado O GIF acima mostra que div1 contém o “ Centro ” classe como mostra “ verdadeiro ”, enquanto div2 e div3 exibem “ falso ” na caixa de alerta, o que significa que eles não contêm o “ Centro ' classe. Outro método predefinido de JavaScript chamado “ fósforos() ” pode ser usado para verificar se uma classe específica pertence a um elemento ou evento. O ' nome da classe ” é o único parâmetro necessário para determinar se um elemento ou um evento de destino inclui uma determinada classe ou não. Sintaxe A sintaxe fornecida abaixo é utilizada para o método matches(): Na sintaxe acima, Valor de retorno Se o evento de destino tiver uma classe, ele retornará “ verdadeiro ' senão, ' falso ” é retornado. Em um arquivo JavaScript ou em uma tag de script, use as linhas de código abaixo para verificar se o event.target tem uma classe específica ou não usando o comando “ fósforos() ” método: Nas linhas de código acima: Resultado O GIF acima mostra que apenas div3 contém o “ div3Style ” classe como mostra “ verdadeiro ”. Para determinar se um evento acionado tem uma classe especificada, use o JavaScript “ contém() ” ou o método “ fósforos() ” método. No entanto, o método contains() é uma das abordagens mais úteis usadas para determinar a classe de um elemento. Ambos os métodos retornam “ verdadeiro ” se o evento acionado tiver uma classe else “ falso ” é retornado. Este post explicou os métodos para determinar se o event.target tem uma classe específica ou não usando JavaScript.
< div classe = 'div div2Style' Eu iria = 'div2' > dois
< div classe = 'div div3Style' Eu iria = 'div3' > 3
div >
div >
div >
preenchimento : 10px ;
altura : 100px ;
largura : 100px ;
margem : 10px ;
}
margem : auto ;
}
{
fundo - cor : vermelho ;
}
{
fundo - cor : rgb ( 194 , 54 , 77 ) ;
}
{
fundo - cor : rosa ;
}
onde temClasse = evento. alvo . lista de classe . contém ( 'Centro' ) ;
alerta ( 'Esta div contém a classe 'center': ' + hasClass ) ;
} ) ;
Método 2: verifique se event.target tem uma classe específica usando o método matches()
Exemplo
onde temClasse = evento. alvo . fósforos ( '.div3Style' ) ;
alerta ( 'A classe deste div corresponde à classe 'div3Style': ' + hasClass ) ;
} ) ;
Conclusão