Sjekk om et element inneholder en klasse i JavaScript

Ved å bruke klasser i HTML gjør det mulig å gruppere elementer og ha samme styling eller funksjonalitet. Som et resultat er det like enkelt å endre atferden til alle elementer som deltar i en klasse som å skrive eller endre en enkelt kodelinje. I noen tilfeller, for eksempel å oppdatere en stil, kan det hende at brukere trenger å bekrefte om en bestemt klasse er en del av et element eller ikke.

Denne opplæringen vil illustrere hvordan du kan sjekke om elementet inneholder en klasse i JavaScript.

Hvordan sjekke om et element inneholder en klasse i JavaScript?

For å bekrefte om et element inneholder en klasse, bruk følgende metoder:

• inneholder () -metode
• Matches () -metode

La oss forstå arbeidet med disse metodene individuelt.

Metode 1: Kontroller om et element inneholder en klasse som bruker inneholder () -metode

“inneholder ()”Metode for“Klasseliste”Objekt kan brukes til å bekrefte om et element har et bestemt klassenavn. Det er en av de mest populære metodene som brukes for å bestemme klassen til et element.

Syntaks
Følg den gitte syntaks for contacts () -metoden:

element.Klasseliste.inneholder ('klassenavn')

Her,

• “element”Er et HTML -element som vil bli sjekket om det inneholder denne spesifikke klassen.
• “klassenavn”Identifiser navnet på CSS -klassen som elementet er en del av

Returverdi
Hvis elementet har klassenavnet, kommer det tilbake “ekte”, Ellers gir det tilbake“falsk”.

Eksempel
Lag en knapp med klasser "knapper”Og“ButtonStyle”For å style knappen. Fest en “ved trykk”Hendelse med knappen som utløser funksjonen for å sjekke om den spesifiserte klassen er en del av knappelementet eller ikke:

Knapp

Før JavaScript -koden vil utdataene se slik ut:

I en JavaScript -fil, skriver du bare disse kodelinjene:

funksjon classCheck ()
const elementClass = dokument.QuerySelector ('Button');
if (elementclass.Klasseliste.inneholder ('ButtonStyle'))
Varsel ("Ja! Knappen inneholder denne 'ButtonStyle' -klassen ");

I koden ovenfor:

• Definere en funksjon “ClassCheck ()”Det vil bli utløst på knappeklikk.
• Hent deretter knappen ved å bruke “QuerySelector ()”Metode og lagre den i en variabel”ElementClass”.
• Ring "inneholder ()”Metode ved å passere et spesifikt klassenavn som“ButtonStyle”Som vil sjekke om det er en del av knappen eller ikke.
• Hvis det kommer tilbake “ekte”, Vises en varslingsmelding:

Produksjon

Ovennevnte utgang indikerer at når knappen er klikket, viser den at den har en "ButtonStyle”Klasse.

Metode 2: Kontroller om et element inneholder en klasse ved hjelp av matches () -metode

Det er en annen metode, “fyrstikker()”, Det vil avgjøre om elementet har en bestemt klasse eller ikke. Det tar en enkelt parameter, klassenavnet, for å bekrefte om elementet inneholder den klassen eller ikke.

Syntaks
Følgende syntaks brukes for matches () -metoden:

element.fyrstikker('.klassenavn')

I syntaks ovenfor,

• “element”Er et HTML -element som vil bli sjekket om det inneholder denne klassen eller ikke.
• “klassenavn”Indikerer navnet på CSS -klassen som elementet er en del av. Navnet på klassen sendes til matches () -metoden med en prikk (.) som identifiserer “klasse”.

Returverdi
Det kommer også tilbake “ekte”Hvis OR -elementet har en annen klasse,”falsk”Er returnert.

Eksempel
I en JavaScript -fil, bruk de gitte kodelinjene for å bekrefte om elementet har den spesifikke klassen eller ikke ved å kalle Matches () -metoden:

funksjon classCheck ()
const elementClass = dokument.QuerySelector ('Button');
if (elementclass.fyrstikker('.knappestyle '))
Varsel ("Ja! Knappen inneholder denne 'ButtonStyle' -klassen ");

I ovennevnte kodebit:

• Først definer en funksjon "ClassCheck ()”Det vil bli utløst på knappeklikk.
• Hent deretter knappen ved å bruke “QuerySelector ()”Metode og lagre den i en variabel”ElementClass”.
• Ring "fyrstikker()”Metode ved å sende et spesifikt klassenavn som her,”ButtonStyle”Med en prikk (.) før det, som vil indikere at det er klassen og sjekk om det er en del av knappen eller ikke.
• Hvis Matches () -metoden kommer tilbake "ekte”, En varslingsmelding“Ja! Knappen inneholder denne 'ButtonStyle' -klassen”Vises:

Produksjon

Konklusjon

For å bekrefte om et element inneholder en klasse, bruk JavaScript “inneholder ()”Metode eller“fyrstikker()”Metode. Contains () -metoden er den mest brukte metoden for å bestemme elementets klasse. Begge metodene returnerer “ekte”Hvis elementet har en annen klasse”falsk”Er returnert. Denne opplæringen illustrerte hvordan du kan sjekke om et element inneholder en klasse i JavaScript eller ikke med detaljerte eksempler.