Den här artikeln kommer att visa metoderna för att kontrollera om en kropp har en specifik klass med hjälp av JavaScript.
Hur kontrollerar jag om kroppen har en specifik klass med hjälp av JavaScript?
Använd följande metoder för att kontrollera om en kropp har en specifik klass med JavaScript:
- ' klasslista ' egendom och ' innehåller() 'metoden.
- ' getElementsByTagName() ' och ' match() ' metoder.
- ' jQuery ”.
Låt oss illustrera var och en av tillvägagångssätten en efter en!
Metod 1: Kontrollera om Body har en specifik klass i JavaScript med classList Property och contains()-metoder
den ' klasslista ” egenskapen ger CSS-klassnamnen på ett element. Medan ' innehåller() ”-metoden ger sant om en nod är en ättling. Dessa kombinerade metoder kan användas för att komma åt den inneslutna klassen i det associerade elementet.
Syntax
nod. innehåller ( naken )
I ovanstående syntax:
- ' naken ” motsvarar nodens ättling till den associerade noden.
Exempel
Låt oss få en översikt över nedanstående exempel:
< Centrum >< kropp klass = 'innehålla' >
< h2 > Det här är Linuxhint-webbplatsen h2 >
Centrum > kropp >
< skripttyp = 'text/javascript' >
om ( dokumentera. kropp . klasslista . innehåller ( 'innehålla' ) ) {
trösta. logga ( 'Kroppens element har klass' ) ;
}
annan {
trösta. logga ( 'Kroppens element har inte klass' ) ;
}
manus >
Tillämpa stegen nedan, enligt ovanstående kod:
- Inkludera först en '
' element som har attributet set ' klass ”. - Lägg också till en rubrik inom det specifika elementet ( ).
- I JS-koden, använd ' klasslista ' egendom kombinerad med ' innehåller() 'metoden.
- Detta kommer resulterande åtkomst till klassen för den associerade '
”-element baserat på det angivna klassnamnet i metodens parameter. - Vid tillfredsställt villkor, ' om ' villkoret kommer att köras.
- Tvärtom, ' annan ”-satskodblocket kommer att köras.
Produktion
I ovanstående utdata kan det ses att den specifika klassen ingår i '
Metod 2: Kontrollera om Body har en specifik klass i JavaScript med metoderna getElementsByTagName() och match()
den ' getElementsByTagName() ”-metoden ger en samling av alla element som har ett särskilt taggnamn. den ' match() ”-metoden matchar det angivna värdet med strängen. Dessa metoder kan användas för att komma åt det nödvändiga elementet genom dess tagg och kontrollera efter den specifika klassen.
Syntax
dokumentera. getElementsByTagName ( märka )I den angivna syntaxen:
- ' märka ” representerar elementets taggnamn.
Exempel
Följande exempel visar det diskuterade konceptet:
< img src = 'mall2.png' höjd = '150px' bredd = '150px' >
Centrum > kropp >
< skripttyp = 'text/javascript' >
låta skaffa sig = dokumentera. getElementsByTagName ( 'kropp' ) [ 0 ] . klassnamn . match ( /innehåller/ )
om ( skaffa sig ) {
trösta. logga ( 'Kroppens element har klass' ) ;
}
annan {
trösta. logga ( 'Kroppens element har inte klass' ) ;
}
manus >
I kodavsnittet ovan:
- På samma sätt, inkludera en '
' element som har den angivna klassen. - Innehåll också en bild med de angivna måtten inom det angivna elementet i föregående steg.
- I JavaScript-kodraderna, gå till '
'-element av dess tagg med hjälp av ' getElementsByTagName() 'metoden. - den ' [0] ” indikerar att det första elementet som motsvarar den angivna taggen i föregående steg kommer att hämtas.
- den ' klassnamn ' egendom och ' match() ”-metoden kommer att matcha den angivna klassen i dess parameter mot ”
' element. - Det tidigare uttalandet i ' om ” condition kommer att exekveras när alla villkor i de föregående stegen är uppfyllda.
- Annars kommer det senare uttalandet att visas.
Produktion
Ovanstående utdata indikerar att det tillämpade villkoret för en specifik klass är uppfyllt.
Metod 3: Kontrollera om Body har en specifik klass i JavaScript med hjälp av jQuery
Detta tillvägagångssätt kan implementeras för att komma åt det nödvändiga elementet direkt och lokalisera den specifika klassen mot det med hjälp av dess metod helt enkelt.
Exempel
Låt oss gå igenom nedanstående exempel:
< Centrum >< kropp klass = 'innehåller' >
< platshållare för textområde = 'Skriv valfri text...' > textområde >
Centrum > kropp >
om ( $ ( 'kropp' ) . hasClass ( 'innehåller' ) ) {
varna ( 'Kroppens element har klass' )
}
annan {
varna ( 'Kroppens element har inte klass' )
}
manus >
I kodraderna ovan:
- Inkludera ' jQuery ”-biblioteket för att använda dess funktioner.
- Inkludera på samma sätt '
' element som har den angivna klassen. - Lägg också till ett '
” element inom det angivna elementet i föregående steg. - I JS-koden, gå till '
' element. Använd också ' hasClass() ” metod för att söka efter den angivna klassen i det hämtade elementet. - Detta kommer att varna det tidigare meddelandet när villkoret är uppfyllt.
- I det andra fallet kommer det senare uttalandet att visas.
Produktion
Ovanstående resultat innebär att det önskade kravet uppnås.
Slutsats
den ' klasslista ' egendom och ' innehåller() 'metoden, ' getElementsByTagName() ' och ' match() ' metoder eller ' jQuery ” kan användas för att kontrollera om en kropp har en specifik klass med hjälp av JavaScript. Dessa tillvägagångssätt kan användas för att söka efter den specifika klassen inom ett element genom att hänvisa till motsvarande element direkt, med dess tagg eller genom att använda jQuery-metoden. Den här bloggen förklarade för att kontrollera om en kropp har en specifik klass i JavaScript