Este artigo demonstrará as abordagens para verificar se um corpo possui uma classe específica usando JavaScript.
Como verificar se o corpo tem uma classe específica usando JavaScript?
Para verificar se um corpo possui uma classe específica usando JavaScript, aplique as seguintes abordagens:
- “ lista de classes ” propriedade e “ contém() ” método.
- “ getElementsByTagName() ' e ' Combine() ' métodos.
- “ jQuery ”.
Vamos ilustrar cada uma das abordagens uma a uma!
Abordagem 1: verifique se o corpo tem uma classe específica em JavaScript usando a propriedade classList e métodos contains()
O ' lista de classe ” fornece os nomes de classe CSS de um elemento. Considerando que a ' contém() ” retorna true se um nó for um descendente. Esses métodos combinados podem ser aplicados para acessar a classe contida no elemento associado.
Sintaxe
nó. contém ( nu )
Na sintaxe acima:
- “ nu ” corresponde ao nó descendente do nó associado.
Exemplo
Vamos ter uma visão geral do exemplo abaixo:
< Centro >< corpo classe = 'conter' >
< h2 > Este é o site do Linuxhint h2 >
Centro > corpo >
< tipo de script = 'texto/javascript' >
E se ( documento. corpo . lista de classes . contém ( 'conter' ) ) {
console. registro ( 'O elemento do corpo tem classe' ) ;
}
senão {
console. registro ( 'O elemento do corpo não tem classe' ) ;
}
roteiro >
Aplique as etapas abaixo indicadas, conforme fornecido no código acima:
- Em primeiro lugar, inclua um “
” elemento com o atributo set “ classe ”. - Além disso, adicione um título dentro do elemento específico (
). - No código JS, aplique o “ lista de classe ” propriedade combinada com a propriedade “ contém() ” método.
- Isso resultará no acesso à classe do associado “
” baseado no nome da classe especificada no parâmetro do método. - Após a condição satisfeita, o “ E se ” condição será executada.
- Ao contrário, o “ senão ” bloco de código de instrução será executado.
Resultado
Na saída acima, pode-se ver que a classe específica está incluída no “
Abordagem 2: verifique se o corpo tem uma classe específica em JavaScript usando os métodos getElementsByTagName() e match()
O ' getElementsByTagName() ” fornece uma coleção de todos os elementos com um nome de tag específico. O ' Combine() ” corresponde ao valor especificado com a string. Esses métodos podem ser utilizados para acessar o elemento necessário por sua tag e verificar a classe específica.
Sintaxe
documento. getElementsByTagName ( marcação )Na sintaxe fornecida:
- “ marcação ” representa o nome da tag do elemento.
Exemplo
O exemplo a seguir demonstra o conceito discutido:
< img src = 'modelo2.png' altura = '150px' largura = '150px' >
Centro > corpo >
< tipo de script = 'texto/javascript' >
deixar pegue = documento. getElementsByTagName ( 'corpo' ) [ 0 ] . nome da classe . Combine ( /contém/ )
E se ( pegue ) {
console. registro ( 'O elemento do corpo tem classe' ) ;
}
senão {
console. registro ( 'O elemento do corpo não tem classe' ) ;
}
roteiro >
No trecho de código acima:
- Da mesma forma, inclua um “
” elemento com a classe especificada. - Além disso, inclua uma imagem com as dimensões definidas dentro do elemento indicado na etapa anterior.
- Nas linhas de código do JavaScript, acesse o “
” elemento por sua tag usando o “ getElementsByTagName() ” método. - O ' [0] ” indica que o primeiro elemento correspondente à tag indicada na etapa anterior será buscado.
- O ' nome da classe ” propriedade e o “ Combine() ” corresponderá à classe declarada em seu parâmetro em relação ao método “
' elemento. - A declaração anterior no “ E se ” condição será executada após a satisfação de todas as condições nas etapas anteriores.
- Caso contrário, a última instrução será exibida.
Resultado
A saída acima indica que a condição aplicada para uma classe específica foi satisfeita.
Abordagem 3: verifique se o corpo tem uma classe específica em JavaScript usando jQuery
Essa abordagem pode ser implementada para acessar o elemento necessário diretamente e localizar a classe específica nele com a ajuda de seu método de forma simples.
Exemplo
Vamos ao exemplo abaixo dado:
< Centro >< corpo classe = 'contém' >
< espaço reservado para área de texto = 'Digite qualquer texto...' > área de texto >
Centro > corpo >
E se ( $ ( 'corpo' ) . hasClass ( 'contém' ) ) {
alerta ( 'O elemento do corpo tem classe' )
}
senão {
alerta ( 'O elemento do corpo não tem classe' )
}
roteiro >
Nas linhas de código acima:
- Inclua o “ jQuery ” para utilizar suas funcionalidades.
- Da mesma forma, inclua o “
” elemento tendo a classe indicada. - Além disso, adicione um “ <área de texto> ” elemento dentro do elemento indicado na etapa anterior.
- No código JS, acesse o “
' elemento. Além disso, aplique o “ hasClass() ” para procurar a classe indicada no elemento buscado. - Isso irá alertar a mensagem anterior sobre a condição satisfeita.
- No outro caso, a última instrução será exibida.
Resultado
A saída acima implica que o requisito desejado foi alcançado.
Conclusão
O ' lista de classe ” propriedade e “ contém() ” método, o “ getElementsByTagName() ' e ' Combine() ” métodos, ou o “ jQuery ” pode ser usado para verificar se um corpo possui uma classe específica usando JavaScript. Essas abordagens podem ser utilizadas para pesquisar a classe específica dentro de um elemento, referindo-se diretamente ao elemento correspondente, por sua tag ou usando o método jQuery. Este blog explicou para verificar se um corpo tem uma classe específica em JavaScript