Sjekk om spesifikk klasse finnes på siden ved hjelp av JavaScript

Under utvikling av nettsteder bekymrer programmerere seg for hvorfor ønsket utfall ikke vises på siden, så de må sjekke om den spesifikke klassen er lagt til den aktuelle siden eller elementet eller ikke. For å gjøre det gir JavaScript noen metoder for klasseverifisering av et element eller en side, for eksempel Contains () -metode og lengdeegenskapen med GetElementSByClassName () -metoden.

Denne bloggen vil definere metodene for å avgjøre om den spesifikke klassen eksisterer på siden ved hjelp av JavaScript.

Hvordan sjekke om spesifikk klasse finnes på siden ved hjelp av JavaScript?

For å bekrefte om den aktuelle klassen eksisterer, bruk følgende JavaScript -metoder:

• dokument.getElementsByClassName () med lengdeegenskap.
• inneholder () -metode

Metode 1: Sjekk om en spesifikk/bestemt klasse finnes på siden ved hjelp av dokument.getElementsByClassName () med lengdeegenskap

Bruke "getElementsByClassName ()”Metode med“lengde”Eiendom for å avgjøre om den aktuelle klassen eksisterer på siden eller ikke. Metoden GetElementsByClassName () brukes til å velge elementene med klassenavnet, og deretter blir det sjekket for å se om samlingens lengdeattributt er større enn 0. Hvis det sendes ut “ja”, Klassen er til stede på siden.

Syntaks

Følg den gitte syntaks for bruk av getElementsByClassName () -metoden med lengdeegenskapen:

dokument.getElementsByClassName ('ClassName').lengde

Passer klassenavnet som en parameter som må verifiseres.

Eksempel

I en HTML -fil, design først siden. Her vil vi legge til et bilde som en logo på overskriften ved å bruke et divelement og tag:

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

Sett deretter tittelen på overskriften:

Sjekk om spesifikk klasse finnes på siden ved hjelp av JavaScript

Etter det, lag en knapp på siden som vil kalle “sjekkklasseeksister ()”Funksjon som forteller om den spesifikke klassen eksisterer på siden eller ikke:

Klikk her!

Å utføre HTML -koden ovenfor gir følgende side i nettleseren:

Nå, i JavaScript -filen eller taggen, bruker du følgende kode:

funksjon CheckClassexists ()
const classCheck = dokument.GetElementsByClassName ('Flex-Item1').lengde> 0;
if (classCheck)
Alert ('✅ klasse "Flex-Item1" eksisterer på side');
annet
Alert ('⛔ klasse "Flex-item1" eksisterer ikke på side');

I koden ovenfor:

• Først definer en funksjon "sjekkklasseeksister ()”Som vil utløse knappeklikk.
• Lag en variabel som lagrer resultatet for å sjekke klassen “Flex-item1”Ved å bruke“getElementsByClassName ()”Metode og sjekk deretter om samlingen er“lengde”Attributt er større enn 0.
• Vis nå en varselmelding for klasseeksistens og ikke eksisterer på siden.
• Hvis den resulterende verdien i variabelen er større enn 0, viser den "klasse"Flex-item1 "eksisterer på side”.
• Ellers vil en varslingsmelding vise "klasse “Flex-item1 "eksisterer ikke på side”.

Produksjon

For å bekrefte om det spesifiserte elementet inneholder den aktuelle klassen i JavaScript, må du sjekke neste avsnitt.

Metode 2: Sjekk om den spesifikke klassen eksisterer på siden som bruker inneholder () -metode

For å avgjøre om en bestemt klasse eksisterer på en webside, bruk "inneholder ()”Metode for“Klasseliste”Eiendom. Pass klassenavnet i contacts () -metoden, og det gir sant hvis klassenavnet eksisterer i det spesifiserte elementet ellers, det returnerer falsk.

Syntaks

Bruk følgende syntaks for contacts () -metoden:

Klasseliste.inneholder ('ClassName')

Eksempel

Som vi vet, er alt innholdet på websiden inne i taggen, så vi vil først hente kroppselementet ved å bruke det tildelte ID:

Klikk her!

Definer en funksjon og hent kroppselementet ved å passere den tildelte IDen “s”I“getElementById ()”Metode, kaller deretter“inneholder ()”Metode ved å passere klassen“Divstyle”For å sjekke om denne klassen eksisterer i hele taggen eller ikke:

funksjon CheckClassexists ()
const classCheck = dokument.getElementById ('PG');
if (classcheck.Klasseliste.inneholder ('divStyle'))
Alert ('✅ klasse' Divstyle 'eksisterer på side');
annet
Alert ('⛔ klasse "Divstyle" eksisterer ikke på side');

Utgangen viser at “kropp”Element/tag inneholder ikke“Divstyle”Klasse:

Vi har samlet den essensielle informasjonen relatert til å verifisere en bestemt klasse på siden ved hjelp av JavaScript.

Konklusjon

For å avgjøre om den aktuelle klassen eksisterer på siden, bruker du “dokument.getElementsByClassName ()”Metode med“lengde”Eiendom eller“inneholder ()”Metode. Den første metoden er den mest brukte for dette formålet. Contains () -metoden brukes for ethvert spesifikt element. I denne bloggen definerte vi metodene for å avgjøre om den spesifikke klassen eksisterer på siden ved hjelp av JavaScript.