Controlla se un elemento contiene una classe in JavaScript

L'uso delle classi in HTML consente di raggrupparsi elementi e avere lo stesso stile o funzionalità. Di conseguenza, cambiare il comportamento di tutti gli elementi che partecipano a una classe è facile come scrivere o cambiare una singola riga di codice. In alcuni casi, come l'aggiornamento di uno stile, potrebbe essere necessario verificare se una determinata classe fa parte di un elemento o meno.

Questo tutorial illustrerà come verificare se l'elemento contiene una classe in JavaScript.

Come verificare se un elemento contiene una classe in JavaScript?

Per verificare se un elemento contiene una classe, utilizzare i seguenti metodi:

• contiene () metodo
• Metodo Matches ()

Comprendiamo il funzionamento di questi metodi individualmente.

Metodo 1: verificare se un elemento contiene una classe utilizzando il metodo ()

IL "contiene ()Metodo del "classlist"L'oggetto può essere utilizzato per verificare se un elemento ha un nome di classe particolare. È uno dei metodi più popolari utilizzati per determinare la classe di un elemento.

Sintassi
Segui la sintassi data per il metodo contiene ():

elemento.classlist.contiene ("nome-classe")

Qui,

• "elemento"È un elemento HTML che verrà controllato se contiene questa classe specifica.
• IL "nome della classe"Identifica il nome della classe CSS di cui l'elemento fa parte

Valore di ritorno
Se l'elemento ha il nome di classe, restituisce "VERO", Altrimenti restituisce"falso".

Esempio
Crea un pulsante con le classi "bottoni" E "Pulsante"Per lo styling del pulsante. Attacca un "al clic"Evento con il pulsante che innesca la funzione per verificare se la classe specificata fa parte dell'elemento pulsante o meno:

Pulsante

Prima del codice JavaScript, l'output sembrerà così:

In un file JavaScript, scrivi semplicemente queste righe di codice:

funzione classcheck ()
const elementClass = document.QuerySelector ('Button');
if (elementclass.classlist.contiene ('buttonstyle'))
Avviso ("Sì! Il pulsante contiene questa classe "abbottonate");

Nel codice sopra:

• Definire una funzione "classcheck ()"Verrà attivato sul clic del pulsante.
• Quindi, prendi il pulsante usando "QuerySelector ()"Metodo e archivialo in una variabile"Elementclass".
• Chiama il "contiene ()"Metodo passando un nome di classe specifico come"Pulsante"Che controllerà se fa parte del pulsante o no.
• Se ritorna "VERO", Verrà visualizzato un messaggio di avviso:

Produzione

L'uscita sopra indica che quando si fa clic sul pulsante, mostra che ha un "Pulsante" classe.

Metodo 2: verificare se un elemento contiene una classe usando le partite ()

C'è un altro metodo, "corrispondenze ()"Ciò determinerà se l'elemento ha una classe particolare o meno. Ci vuole un singolo parametro, il nome della classe, per verificare se l'elemento contiene quella classe o no.

Sintassi
La seguente sintassi viene utilizzata per il metodo Matches ():

elemento.corrispondenze ('.nome della classe')

Nella sintassi sopra,

• IL "elemento"È un elemento HTML che verrà controllato se contiene questa particolare classe o no.
• IL "nome della classe"Indica il nome della classe CSS di cui l'elemento fa parte. Il nome della classe viene passato al metodo Matches () con un punto (.) che identifica "classe".

Valore di ritorno
Ritorna anche "VERO"Se l'elemento o l'elemento ha un corso altro,"falso"Viene restituito.

Esempio
In un file JavaScript, utilizzare le righe di codice fornite per verificare se l'elemento ha la classe specifica o meno chiamando il metodo Matches ():

funzione classcheck ()
const elementClass = document.QuerySelector ('Button');
if (elementclass.corrispondenze ('.ButtonStyle '))
Avviso ("Sì! Il pulsante contiene questa classe "abbottonate");

Nel frammento di codice sopra:

• Innanzitutto, definire una funzione "classcheck ()"Verrà attivato sul clic del pulsante.
• Quindi, prendi il pulsante usando "QuerySelector ()"Metodo e archivialo in una variabile"Elementclass".
• Chiama il "corrispondenze ()"Metodo passando un nome di classe specifico come qui,"Pulsante"Con un punto (.) prima di esso, che indicherà che è la classe e controllerà se fa parte del pulsante o no.
• Se il metodo Matches () restituisce "VERO", Un messaggio di allerta"SÌ! Il pulsante contiene questa classe "abbottonate"" sarà mostrato:

Produzione

Conclusione

Per verificare se un elemento contiene una classe, usa JavaScript "contiene ()Metodo o il "corrispondenze ()" metodo. Il metodo contiene () è il metodo più utilizzato per determinare la classe dell'elemento. Entrambi i metodi ritornano "VERO"Se l'elemento ha un corso altro"falso"Viene restituito. Questo tutorial ha illustrato come verificare se un elemento contiene una classe in javascript o meno con esempi dettagliati.