Questo articolo dimostrerà gli approcci per verificare se un corpo ha una classe specifica utilizzando JavaScript.
Come verificare se il corpo ha una classe specifica utilizzando JavaScript?
Per verificare se un corpo ha una classe specifica utilizzando JavaScript, applica i seguenti approcci:
- “ classList ” proprietà e “ contiene() ' metodo.
- “ getElementsByTagName() ' e ' incontro() metodi.
- “ jQuery ”.
Illustriamo ciascuno degli approcci uno per uno!
Approccio 1: verifica se Body ha una classe specifica in JavaScript utilizzando la proprietà classList e i metodi contains()
Il ' classList La proprietà ” fornisce i nomi delle classi CSS di un elemento. Mentre il ' contiene() ” restituisce true se un nodo è un discendente. Questi metodi combinati possono essere applicati per accedere alla classe contenuta nell'elemento associato.
Sintassi
nodo. contiene ( nudo )
Nella sintassi precedente:
- “ nudo ” corrisponde al nodo discendente del nodo associato.
Esempio
Diamo una panoramica dell'esempio riportato di seguito:
< centro >< corpo classe = 'contenere' >
< h2 > Questo è il sito web di Linuxhint h2 >
centro > corpo >
< tipo di sceneggiatura = 'testo/javascript' >
Se ( documento. corpo . classList . contiene ( 'contenere' ) ) {
consolare. tronco d'albero ( 'L'elemento del corpo ha classe' ) ;
}
altro {
consolare. tronco d'albero ( 'L'elemento body non ha classe' ) ;
}
copione >
Applicare i passaggi indicati di seguito, come indicato nel codice precedente:
- In primo luogo, includi un '
” elemento con l'attributo set “ classe ”. - Inoltre, aggiungi un'intestazione all'interno del particolare elemento ( ).
- Nel codice JS, applica il ' classList ” proprietà combinata con “ contiene() ' metodo.
- Ciò consentirà di conseguenza l'accesso alla classe dell'associato '
” elemento basato sul nome della classe specificato nel parametro del metodo. - A condizione soddisfatta, il “ Se La condizione verrà eseguita.
- Al contrario, il “ altro ” verrà eseguito il blocco di codice dell'istruzione.
Produzione
Nell'output sopra, si può vedere che la particolare classe è inclusa nel '
Approccio 2: verifica se Body ha una classe specifica in JavaScript utilizzando i metodi getElementsByTagName() e match()
Il ' getElementsByTagName() Il metodo ” fornisce una raccolta di tutti gli elementi con un particolare nome di tag. Il ' incontro() ” corrisponde al valore specificato con la stringa. Questi metodi possono essere utilizzati per accedere all'elemento richiesto tramite il suo tag e verificare la classe specifica.
Sintassi
documento. getElementsByTagName ( etichetta )Nella sintassi fornita:
- “ etichetta ” rappresenta il nome del tag dell'elemento.
Esempio
L'esempio seguente dimostra il concetto discusso:
< img src = 'template2.png' altezza = '150px' larghezza = '150px' >
centro > corpo >
< tipo di sceneggiatura = 'testo/javascript' >
permettere ottenere = documento. getElementsByTagName ( 'corpo' ) [ 0 ] . nome della classe . incontro ( /contiene/ )
Se ( ottenere ) {
consolare. tronco d'albero ( 'L'elemento del corpo ha classe' ) ;
}
altro {
consolare. tronco d'albero ( 'L'elemento body non ha classe' ) ;
}
copione >
Nello snippet di codice sopra:
- Allo stesso modo, includi un '
” elemento avente la classe specificata. - Inoltre, contenere un'immagine con le dimensioni impostate all'interno dell'elemento indicato nel passaggio precedente.
- Nelle righe di codice JavaScript, accedi a '
” elemento con il suo tag usando il “ getElementsByTagName() ' metodo. - Il ' [0] ” indica che verrà recuperato il primo elemento corrispondente al tag indicato nel passaggio precedente.
- Il ' nome della classe ” proprietà e il “ incontro() ” il metodo corrisponderà alla classe dichiarata nel suo parametro rispetto al “
elemento '. - La precedente dichiarazione nel “ Se La condizione verrà eseguita al soddisfacimento di tutte le condizioni nei passaggi precedenti.
- In caso contrario, verrà visualizzata quest'ultima istruzione.
Produzione
L'output precedente indica che la condizione applicata per una classe specifica è soddisfatta.
Approccio 3: verifica se Body ha una classe specifica in JavaScript utilizzando jQuery
Questo approccio può essere implementato per accedere direttamente all'elemento richiesto e individuare semplicemente la classe specifica su di esso con l'aiuto del suo metodo.
Esempio
Esaminiamo l'esempio riportato di seguito:
< centro >< corpo classe = 'contiene' >
< segnaposto area di testo = 'Digita qualsiasi testo...' > area di testo >
centro > corpo >
Se ( $ ( 'corpo' ) . hasClass ( 'contiene' ) ) {
mettere in guardia ( 'L'elemento del corpo ha classe' )
}
altro {
mettere in guardia ( 'L'elemento body non ha classe' )
}
copione >
Nelle righe di codice precedenti:
- Includi il ' jQuery ” per utilizzare le sue funzionalità.
- Allo stesso modo, includi '
” elemento avente la classe dichiarata. - Inoltre, aggiungi un ' ” all'interno dell'elemento indicato nel passaggio precedente.
- Nel codice JS, accedi al '
elemento '. Inoltre, applica il ' hasClass() ” metodo per cercare la classe indicata nell'elemento recuperato. - Ciò avviserà di conseguenza il messaggio precedente sulla condizione soddisfatta.
- Nell'altro caso, verrà visualizzata quest'ultima istruzione.
Produzione
L'output di cui sopra implica che il requisito desiderato è raggiunto.
Conclusione
Il ' classList ” proprietà e “ contiene() ” metodo, il “ getElementsByTagName() ' e ' incontro() ” metodi, o il “ jQuery ” può essere utilizzato per verificare se un corpo ha una classe specifica utilizzando JavaScript. Questi approcci possono essere utilizzati per cercare la particolare classe all'interno di un elemento facendo riferimento direttamente all'elemento corrispondente, tramite il suo tag o utilizzando il metodo jQuery. Questo blog ha spiegato di verificare se un corpo ha una classe specifica in JavaScript