Controlla se nella pagina esiste una classe specifica utilizzando JavaScript

Durante lo sviluppo del sito Web, a volte i programmatori si preoccupano del perché il risultato desiderato non viene mostrato nella pagina, quindi devono verificare se la classe specifica viene aggiunta alla pagina o all'elemento particolare o no. Per fare ciò, JavaScript fornisce alcuni metodi per la verifica della classe di un elemento o una pagina, come il metodo contiene () e la proprietà di lunghezza con il metodo getElementsByClassName ().

Questo blog definirà i metodi per determinare se la classe specifica esiste nella pagina usando JavaScript.

Come verificare se esiste una classe specifica nella pagina usando JavaScript?

Per verificare se esiste la particolare classe, utilizzare i seguenti metodi JavaScript:

• documento.getElementsByClassName () con proprietà di lunghezza.
• contiene () metodo

Metodo 1: verificare se esiste una classe specifica/particolare nella pagina utilizzando il documento.getElementsByClassName () con proprietà di lunghezza

Usa il "getElementsByClassName ()Metodo "con il"lunghezza"Proprietà per determinare se la particolare classe esiste o meno sulla pagina. Il metodo getElementsByClassName () viene utilizzato per la selezione degli elementi con il nome della classe, quindi viene verificato per vedere se l'attributo di lunghezza della raccolta è maggiore di 0. Se emette "SÌ", La classe è presente sulla pagina.

Sintassi

Seguire la sintassi data per l'utilizzo del metodo getElementsByClassName () con la proprietà di lunghezza:

documento.getElementsByClassName ('ClassName').lunghezza

Passa il nome della classe come parametro che deve essere verificato.

Esempio

In un file HTML, prima progetta la pagina. Qui, aggiungeremo un'immagine come logo sull'intestazione usando un elemento div e un tag:

src = "https: // linuxhint.com/wp-content/uploads/2019/11/logo-final.png " />

Quindi, imposta il titolo sull'intestazione:

Controlla se nella pagina esiste una classe specifica utilizzando JavaScript

Successivamente, crea un pulsante sulla pagina che chiamerà "CheckClassexists ()"Funzione che indica se la classe specifica esiste nella pagina o no:

clicca qui!

L'esecuzione del codice HTML sopra fornisce la pagina seguente sul browser:

Ora, nel file JavaScript o nel tag, utilizzare il seguente codice:

funzione checkClassexists ()
const classcheck = documento.getElementsByClassName ('Flex-Item1').lunghezza> 0;
if (classcheck)
Avviso ('✅ Classe "Flex-Item1" esiste a pagina');
altro
Avviso ('⛔️ Class "Flex-Item1" non esiste a pagina');

Nel codice sopra:

• Innanzitutto, definire una funzione "CheckClassexists ()"Ciò attiverà il clic del pulsante.
• Crea una variabile che memorizza il risultato per controllare la classe "Flex-Item1"Usando il"getElementsByClassName ()"Metodo e quindi controlla se la raccolta"lunghezza"L'attributo è maggiore di 0.
• Ora, mostra un messaggio di avviso per l'esistenza di classe e non esistente nella pagina.
• Se il valore risultante nella variabile è maggiore di 0, mostra "classe"Flex-Item1 "esiste a pagina".
• Altrimenti, un messaggio di allerta mostrerà "classe "Flex-Item1 "non esiste a pagina".

Produzione

Per verificare se l'elemento specificato contiene la classe particolare in JavaScript, controllare la sezione successiva.

Metodo 2: verificare se la classe specifica esiste nella pagina utilizzando () metodo

Per determinare se esiste una determinata classe su una pagina Web, utilizzare il "contiene ()Metodo del "classlist" proprietà. Passa il nome della classe nel metodo contiene () e fornisce true se il nome della classe esiste nell'elemento specificato, restituisce falso.

Sintassi

Utilizzare la seguente sintassi per il metodo contiene ():

classlist.contiene ('classname')

Esempio

Come sappiamo, tutto il contenuto della pagina Web è all'interno del tag, quindi prima di recuperare l'elemento corporeo utilizzando l'ID assegnato:

clicca qui!

Definisci una funzione e prendi l'elemento corporeo passando l'ID assegnato "pag" nel "getElementById ()Metodo ", quindi chiama"contiene ()"Metodo passando la classe"divstyle"Per verificare se questa classe esiste nell'intero tag o no:

funzione checkClassexists ()
const classcheck = documento.getElementById ('pg');
Se (Classcheck.classlist.contiene ('divstyle'))
Alert ('✅ Class "DivStyle" esiste a pagina');
altro
Alert ('⛔️ Class "DivStyle" non esiste a pagina');

L'output mostra che il "corpo"Element/Tag non contiene il"divstyle" classe:

Abbiamo compilato le informazioni essenziali relative alla verifica di una particolare classe sulla pagina usando JavaScript.

Conclusione

Per determinare se la particolare classe esiste sulla pagina, utilizzare il "documento.getElementsByClassName ()Metodo "con il"lunghezza"Proprietà o"contiene ()" metodo. Il primo metodo è il più comunemente usato a questo scopo. Il metodo contiene () viene utilizzato per qualsiasi elemento specifico. In questo blog, abbiamo definito i metodi per determinare se la classe specifica esiste nella pagina usando JavaScript.