Sjekk om kroppen har en spesifikk klasse ved hjelp av JavaScript

Når du designer en webside eller nettstedet, kan det være en mulighet for å sortere lignende funksjonaliteter mot en dedikert klasse ved utviklerens slutt. For eksempel å tildele en bestemt webside til samme element, men med en distinkt klasse for å gjøre ting relevant. I slike situasjoner hjelper det å sjekke om et organ har en spesifikk klasse med å få tilgang til forskjellige funksjonaliteter enkelt og også i oppdateringsprosessene.

Denne artikkelen vil demonstrere tilnærmingene for å sjekke om et organ har en spesifikk klasse som bruker JavaScript.

Hvordan sjekke om kroppen har en spesifikk klasse ved hjelp av JavaScript?

For å sjekke om et organ har en spesifikk klasse ved hjelp av JavaScript, bruk følgende tilnærminger:

• “Klasseliste”Eiendom og“inneholder ()”Metode.
• “getElementsByTagName ()”Og“kamp()”Metoder.
• “jQuery”.

La oss illustrere hver av tilnærmingene en etter en!

Tilnærming 1: Sjekk om kroppen har en spesifikk klasse i JavaScript ved hjelp av klasselisteegenskaper og inneholder () metoder

“Klasseliste”Eiendom gir CSS -klassenavn på et element. Mens “inneholder ()”Metoden gir sann hvis en node er en etterkommer. Disse metodene kombinert kan brukes for å få tilgang til den inneholdte klassen i det tilhørende elementet.

Syntaks

Node.inneholder (desnode)

I syntaks ovenfor:

• “Desnode”Tilsvarer noden etterkommer av den tilhørende noden.

Eksempel
La oss ha en oversikt over det undergitte eksemplet:

Dette er Linuxhint -nettstedet

Bruk trinnene under statlige trinn, som gitt i koden ovenfor:

• For det første, inkluder en "”Element som har settattributtet”klasse”.
• Legg også til en overskrift innenfor det aktuelle elementet ().
• I JS -koden, bruk "Klasseliste”Eiendom kombinert med“inneholder ()”Metode.
• Dette vil resultere for klassen til klassen til den tilknyttede “”Element basert på det spesifiserte klassenavnet i metodens parameter.
• Etter den fornøyde tilstanden, "hvis”Tilstanden vil utføre.
• I motsetning til “ellers”Uttalelseskodeblokk vil utføre.

Produksjon

I output kan man se at den aktuelle klassen er inkludert i "”Element.

Tilnærming 2: Sjekk om kroppen har en spesifikk klasse i JavaScript ved hjelp av getElementsByTagName () og Match () -metoder

“getElementsByTagName ()”Metode gir en samling av alle elementer som har et bestemt tagnavn. “kamp()”Metode samsvarer med den spesifiserte verdien med strengen. Disse metodene kan brukes for å få tilgang til det nødvendige elementet med taggen og se etter den spesifikke klassen.

Syntaks

dokument.getElementsByTagName (tag)

I den medfølgende syntaksen:

• “stikkord”Representerer elementets tagnavn.

Eksempel
Følgende eksempel demonstrerer det diskuterte konseptet:

I ovennevnte kodebit:

• Inkluder på samme måte en "”Element som har den spesifiserte klassen.
• Inneholder også et bilde med de angitte dimensjonene i det angitte elementet i forrige trinn.
• I JavaScript -linjene med kode, får du tilgang til “”Element ved å bruke“getElementsByTagName ()”Metode.
• “[0]”Indikerer at det første elementet som tilsvarer det angitte taggen i forrige trinn, vil bli hentet.
• “klassenavn”Eiendom og“kamp()”Metode vil samsvare for den oppgitte klassen i sin parameter mot“”Element.
• Den tidligere uttalelsen i “hvis”Tilstanden vil utføre etter tilfredsstillelse av alle forholdene i de foregående trinnene.
• Ellers vises den sistnevnte uttalelsen.

Produksjon

Ovennevnte utgang indikerer at den anvendte tilstanden for en spesifikk klasse er fornøyd.

Tilnærming 3: Sjekk om kroppen har en spesifikk klasse i JavaScript ved hjelp av jQuery

Denne tilnærmingen kan implementeres for å få tilgang til det nødvendige elementet direkte og lokalisere den spesifikke klassen mot den ved hjelp av metoden ganske enkelt.

Eksempel
La oss gå gjennom det undergitte eksemplet:

if ($ ("kropp").hasclass ("inneholder"))
Varsel ("Kroppselementet har klasse")

ellers
Varsel ("Kroppselementet har ikke klasse")

I kodelinjene ovenfor:

• Inkluderer "jQuery”Bibliotek for å utnytte funksjonalitetene.
• På samme måte, inkluder "”Element som har den oppgitte klassen.
• Legg også til en "”Element i det uttalte elementet i forrige trinn.
• I JS -koden får du tilgang til “”Element. Bruk også “hasclass ()”Metode for å søke etter den oppgitte klassen i det hentet elementet.
• Dette vil resultere den tidligere meldingen om den fornøyde tilstanden.
• I det andre tilfellet vises den sistnevnte uttalelsen.

Produksjon

Ovennevnte utgang innebærer at ønsket krav oppnås.

Konklusjon

“Klasseliste”Eiendom og“inneholder ()”Metode,“getElementsByTagName ()”Og“kamp()”Metoder, eller“jQuery”Kan brukes til å sjekke om et organ har en spesifikk klasse ved hjelp av JavaScript. Disse tilnærmingene kan brukes til å søke etter den aktuelle klassen i et element ved å referere til det tilsvarende elementet direkte, ved taggen, eller bruke jQuery -metoden. Denne bloggen forklarte for å sjekke om et organ har en spesifikk klasse i JavaScript