Denne artikkelen vil demonstrere tilnærmingene for å sjekke om et organ har en bestemt klasse ved å bruke JavaScript.
Hvordan sjekke om Body har en spesifikk klasse ved å bruke JavaScript?
For å sjekke om en kropp har en bestemt klasse ved hjelp av JavaScript, bruk følgende tilnærminger:
- ' klasseliste ' eiendom og ' inneholder() 'metoden.
- ' getElementsByTagName() ' og ' kamp() 'metoder.
- ' jQuery '.
La oss illustrere hver av tilnærmingene én etter én!
Tilnærming 1: Sjekk om Body har en spesifikk klasse i JavaScript ved å bruke classList Property og contains() Methods
« klasseliste ”-egenskapen gir CSS-klassen navn 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 tilknyttede elementet.
Syntaks
node. inneholder ( naken )
I syntaksen ovenfor:
- ' naken ” tilsvarer nodeetterkommeren til den tilknyttede noden.
Eksempel
La oss få en oversikt over eksemplet nedenfor:
< senter >< kropp klasse = 'inneholde' >
< h2 > Dette er Linuxhint-nettstedet h2 >
senter > kropp >
< skripttype = 'tekst/javascript' >
hvis ( dokument. kropp . klasseliste . inneholder ( 'inneholde' ) ) {
konsoll. Logg ( 'Kroppselementet har klasse' ) ;
}
ellers {
konsoll. Logg ( 'Kroppselementet har ikke klasse' ) ;
}
manus >
Bruk trinnene nedenfor, som gitt i koden ovenfor:
- Først inkluderer en ' ' element som har set-attributtet ' klasse '.
- Legg også til en overskrift i det bestemte elementet ( ).
- I JS-koden bruker du ' klasseliste ' eiendom kombinert med ' inneholder() 'metoden.
- Dette vil resultere i tilgang til klassen til den tilknyttede ' '-element basert på det angitte klassenavnet i metodens parameter.
- Ved tilfredsstilt tilstand, ' hvis ' tilstand vil utføres.
- I motsetning til « ellers ” setningskodeblokk vil utføres.
Produksjon
I utgangen ovenfor kan det ses at den bestemte klassen er inkludert i ' ' element.
Tilnærming 2: Sjekk om Body har en spesifikk klasse i JavaScript ved å bruke metodene getElementsByTagName() og match()
« getElementsByTagName() ”-metoden gir en samling av alle elementer som har et bestemt merkenavn. « kamp() ”-metoden samsvarer med den angitte verdien med strengen. Disse metodene kan brukes for å få tilgang til det nødvendige elementet ved hjelp av taggen og se etter den spesifikke klassen.
Syntaks
dokument. getElementsByTagName ( stikkord )I den angitte syntaksen:
- ' stikkord ' representerer elementets tagnavn.
Eksempel
Følgende eksempel demonstrerer det diskuterte konseptet:
< img src = 'mal2.png' høyde = '150px' bredde = '150px' >
senter > kropp >
< skripttype = 'tekst/javascript' >
la få = dokument. getElementsByTagName ( 'kropp' ) [ 0 ] . klassenavn . kamp ( /inneholder/ )
hvis ( få ) {
konsoll. Logg ( 'Kroppselementet har klasse' ) ;
}
ellers {
konsoll. Logg ( 'Kroppselementet har ikke klasse' ) ;
}
manus >
I kodebiten ovenfor:
- På samme måte inkluderer en ' ' element som har den angitte klassen.
- Innehold også et bilde med de angitte dimensjonene innenfor det angitte elementet i forrige trinn.
- I JavaScript-kodelinjene får du tilgang til ' ' element ved sin tag ved å bruke ' getElementsByTagName() 'metoden.
- « [0] ” indikerer at det første elementet som tilsvarer den angitte taggen i forrige trinn vil bli hentet.
- « klassenavn ' eiendom og ' kamp() '-metoden vil samsvare for den angitte klassen i parameteren mot ' ' element.
- Den tidligere uttalelsen i ' hvis ” betingelse vil utføres når alle betingelsene i de foregående trinnene er oppfylt.
- Ellers vil sistnevnte uttalelse vises.
Produksjon
Ovennevnte utdata indikerer at den anvendte betingelsen for en spesifikk klasse er oppfylt.
Tilnærming 3: Sjekk om Body har en spesifikk klasse i JavaScript ved å bruke jQuery
Denne tilnærmingen kan implementeres for å få tilgang til det nødvendige elementet direkte og lokalisere den spesifikke klassen mot det ved hjelp av metoden.
Eksempel
La oss gå gjennom eksemplet nedenfor:
< senter >< kropp klasse = 'inneholder' >
< tekstområde plassholder = 'Skriv inn hvilken som helst tekst ...' > tekstområde >
senter > kropp >
hvis ( $ ( 'kropp' ) . harKlasse ( 'inneholder' ) ) {
varsling ( 'Kroppselementet har klasse' )
}
ellers {
varsling ( 'Kroppselementet har ikke klasse' )
}
manus >
I kodelinjene ovenfor:
- Ta med ' jQuery ”-biblioteket for å bruke funksjonene.
- På samme måte inkluderer ' ' element som har den angitte klassen.
- Legg også til en '
” element i det angitte elementet i forrige trinn. - I JS-koden får du tilgang til ' ' element. Bruk også ' hasClass() ” metode for å søke etter den angitte klassen i det hentede elementet.
- Dette vil følgelig varsle den tidligere meldingen når tilstanden er oppfylt.
- I det andre tilfellet vil sistnevnte uttalelse vises.
Produksjon
Ovennevnte utgang innebærer at ønsket krav er oppnådd.
Konklusjon
« klasseliste ' eiendom og ' inneholder() 'metoden, ' getElementsByTagName() ' og ' kamp() '-metoder, eller ' jQuery ” kan brukes til å sjekke om en kropp har en spesifikk klasse ved å bruke JavaScript. Disse tilnærmingene kan brukes til å søke etter den bestemte klassen i et element ved å referere til det tilsvarende elementet direkte, ved dens tag eller ved å bruke jQuery-metoden. Denne bloggen forklarte å sjekke om en kropp har en bestemt klasse i JavaScript