Controlla se il corpo ha una classe specifica usando JavaScript

Durante la progettazione di una pagina web o del sito, può esserci la possibilità di ordinare funzionalità simili contro una classe dedicata alla fine dello sviluppatore. Ad esempio, allocando una particolare pagina web allo stesso elemento ma con una classe distinta per rendere le cose rilevanti. In tali situazioni, verificare se un corpo ha una classe specifica aiuta a accedere facilmente a varie funzionalità e anche nei processi di aggiornamento.

Questo articolo dimostrerà gli approcci per verificare se un corpo ha una classe specifica usando JavaScript.

Come verificare se il corpo ha una classe specifica usando JavaScript?

Per verificare se un corpo ha una classe specifica usando JavaScript, applica i seguenti approcci:

• "classlist"Proprietà e"contiene ()" metodo.
• "getElementsByTagName ()" E "incontro()"Metodi.
• "jQuery".

Illustriamo ciascuno degli approcci uno per uno!

Approccio 1: controlla se il corpo ha una classe specifica in JavaScript usando la proprietà classlist e contiene () metodi

IL "classlist"La proprietà fornisce i nomi delle classi CSS di un elemento. Mentre il "contiene ()"Il metodo fornisce vero se un nodo è un discendente. Questi metodi combinati possono essere applicati per accedere alla classe contenuta nell'elemento associato.

Sintassi

nodo.contiene (Desnode)

Nella sintassi sopra:

• "desnode"Corrisponde al discendente del nodo del nodo associato.

Esempio
Facciamo una panoramica dell'esempio seguente:

Questo è il sito web Linuxhint

Applicare i passaggi indicati, come indicato nel codice sopra:

• 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 il"contiene ()" metodo.
• Ciò di conseguenza accederà alla classe dell'Associazione ""Elemento basato sul nome della classe specificato nel parametro del metodo.
• Sulla condizione soddisfatta, il "Se"La condizione eseguirà.
• Contrariamente, il "altro"Il blocco del codice dell'istruzione verrà eseguito.

Produzione

Nell'output sopra, si può vedere che la particolare classe è inclusa in ""Elemento.

Approccio 2: controlla se il corpo ha una classe specifica in JavaScript usando i metodi getElementsByTagName () e Match ()

IL "getElementsByTagName ()"Il metodo fornisce una raccolta di tutti gli elementi con un nome di tag particolare. IL "incontro()"Il metodo corrisponde al valore specificato con la stringa. Questi metodi possono essere utilizzati per accedere all'elemento richiesto dal suo tag e verificare la classe specifica.

Sintassi

documento.getElementsByTagName (tag)

Nella sintassi fornita:

• "etichetta"Rappresenta il nome del tag dell'elemento.

Esempio
Il seguente esempio dimostra il concetto discusso:

Nel frammento di codice sopra:

• Allo stesso modo, includi un “"Elemento con 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 al ""Elemento dal suo tag usando il"getElementsByTagName ()" metodo.
• IL "[0]"Indica che il primo elemento corrispondente al tag dichiarato nel passaggio precedente verrà recuperato.
• IL "nome della classe"Proprietà e"incontro()"Il metodo corrisponderà alla classe dichiarata nel suo parametro contro il""Elemento.
• La prima dichiarazione nel "Se"La condizione eseguirà la soddisfazione di tutte le condizioni nei passaggi precedenti.
• Altrimenti, quest'ultima affermazione verrà visualizzata.

Produzione

L'output sopra indica che la condizione applicata per una classe specifica è soddisfatta.

Approccio 3: controlla se il corpo ha una classe specifica in JavaScript usando JQuery

Questo approccio può essere implementato per accedere direttamente all'elemento richiesto e individuare la classe specifica contro di essa con l'aiuto del suo metodo semplicemente.

Esempio
Passiamo attraverso l'esempio di seguito:

if ($ ("corpo").Hasclass ("contiene"))
Avviso ("L'elemento corporeo ha la classe")

altro
Avviso ("L'elemento corporeo non ha la classe")

Nelle righe di codice sopra:

• Includere il "jQuery"Biblioteca per utilizzare le sue funzionalità.
• Allo stesso modo, includi il “"Elemento con la classe dichiarata.
• Inoltre, aggiungi un ""Elemento all'interno dell'elemento dichiarato nel passaggio precedente.
• Nel codice JS, accedi al ""Elemento. Inoltre, applica il "Hasclass ()"Metodo per cercare la classe dichiarata nell'elemento recuperato.
• Ciò di conseguenza avviserà il precedente messaggio sulla condizione soddisfatta.
• Nell'altro caso, verrà visualizzata quest'ultima dichiarazione.

Produzione

L'output di cui sopra implica che il requisito desiderato viene raggiunto.

Conclusione

IL "classlist"Proprietà e"contiene ()Metodo ", il"getElementsByTagName ()" E "incontro()Metodi ", o"jQuery"Può essere usato per verificare se un corpo ha una classe specifica usando JavaScript. Questi approcci possono essere utilizzati per cercare la particolare classe all'interno di un elemento facendo riferimento all'elemento corrispondente direttamente, con il suo tag o usando il metodo jQuery. Questo blog ha spiegato per verificare se un corpo ha una classe specifica in JavaScript