See artikkel näitab, kuidas kontrollida, kas kehal on JavaScripti abil konkreetne klass.
Kuidas kontrollida, kas kehal on JavaScripti abil konkreetne klass?
Kontrollimaks, kas kehal on JavaScripti abil konkreetne klass, kasutage järgmisi lähenemisviise.
- “ klassiloend ' vara ja ' sisaldab() ” meetod.
- “ getElementsByTagName() ” ja „ vaste() ” meetodid.
- “ jQuery ”.
Illustreerime iga lähenemisviisi ükshaaval!
1. lähenemisviis: kontrollige, kas kehal on JavaScriptis konkreetne klass, kasutades atribuuti classList ja kasutades meetodeid ()
' klassiloend ” atribuut annab elemendi CSS-klassi nimed. arvestades, et ' sisaldab() ” meetod annab tõeseks, kui sõlm on järeltulija. Neid kombineeritud meetodeid saab rakendada seotud elemendis sisalduvale klassile juurdepääsu saamiseks.
Süntaks
sõlm. sisaldab ( alasti )
Ülaltoodud süntaksis:
- “ alasti ” vastab seotud sõlme järglasele sõlmele.
Näide
Anname ülevaate allolevast näitest:
< Keskus >< keha klass = 'sisaldama' >
< h2 > See on Linuxhinti veebisait h2 >
Keskus > keha >
< skripti tüüp = 'tekst/javascript' >
kui ( dokument. keha . klassiloend . sisaldab ( 'sisaldama' ) ) {
konsool. logi ( 'Kehaelemendil on klass' ) ;
}
muidu {
konsool. logi ( 'Kehaelemendil pole klassi' ) ;
}
stsenaarium >
Rakendage alltoodud samme, nagu on näidatud ülaltoodud koodis:
- Esiteks lisage '
' element, millel on atribuut ' klass ”. - Samuti lisage konkreetsele elemendile ( ) pealkiri.
- Rakendage JS-koodis ' klassiloend ' vara koos ' sisaldab() ” meetod.
- Selle tulemusena pääsete juurde seotud '
” element, mis põhineb meetodi parameetris määratud klassinimel. - Kui tingimus on täidetud, on ' kui ” tingimus täidetakse.
- Seevastu ' muidu ” lausekoodiplokk käivitatakse.
Väljund
Ülaltoodud väljundis on näha, et konkreetne klass sisaldub '
2. lähenemisviis: kontrollige, kas kehal on JavaScriptis konkreetne klass, kasutades meetodeid getElementsByTagName() ja match()
' getElementsByTagName() ” meetod annab kõigi elementide kogu, millel on konkreetne sildi nimi. ' vaste() ” meetod sobitab määratud väärtuse stringiga. Neid meetodeid saab kasutada vajalikule elemendile selle sildi kaudu juurde pääsemiseks ja konkreetse klassi kontrollimiseks.
Süntaks
dokument. getElementsByTagName ( silt )Pakutud süntaksis:
- “ silt ” tähistab elemendi sildi nime.
Näide
Järgmine näide demonstreerib käsitletud kontseptsiooni:
< img src = 'template2.png' kõrgus = '150 pikslit' laius = '150 pikslit' >
Keskus > keha >
< skripti tüüp = 'tekst/javascript' >
lase saada = dokument. getElementsByTagName ( 'keha' ) [ 0 ] . klassi nimi . vaste ( /sisaldab/ )
kui ( saada ) {
konsool. logi ( 'Kehaelemendil on klass' ) ;
}
muidu {
konsool. logi ( 'Kehaelemendil pole klassi' ) ;
}
stsenaarium >
Ülaltoodud koodilõigul:
- Samuti lisage '
” element, millel on määratud klass. - Samuti lisage eelmises etapis märgitud elemendis määratud mõõtmetega pilt.
- JavaScripti koodiridadel avage '
' element selle sildi järgi, kasutades ' getElementsByTagName() ” meetod. - ' [0] ” näitab, et tuuakse esimene element, mis vastab eelmises etapis märgitud sildile.
- ' klassi nimi ' vara ja ' vaste() ' meetod vastab oma parameetris märgitud klassile '
” element. - Eelmine väide ' kui ” tingimus täidetakse, kui kõik eelmiste sammude tingimused on täidetud.
- Vastasel juhul kuvatakse viimane väide.
Väljund
Ülaltoodud väljund näitab, et konkreetse klassi jaoks rakendatud tingimus on täidetud.
3. lähenemisviis: kontrollige jQuery abil, kas kehal on JavaScriptis konkreetne klass
Seda lähenemisviisi saab rakendada selleks, et pääseda otse vajalikule elemendile ja leida selle meetodi abil lihtsalt konkreetne klass selle vastu.
Näide
Vaatame läbi alloleva näite:
< Keskus >< keha klass = 'sisaldab' >
< tekstiala kohatäide = 'Tippige mis tahes tekst...' > tekstiala >
Keskus > keha >
kui ( $ ( 'keha' ) . hasClass ( 'sisaldab' ) ) {
hoiatus ( 'Kehaelemendil on klass' )
}
muidu {
hoiatus ( 'Kehaelemendil pole klassi' )
}
stsenaarium >
Ülaltoodud koodiridades:
- Kaasake ' jQuery ” raamatukogu funktsioonide kasutamiseks.
- Samamoodi lisage '
” element, millel on märgitud klass. - Samuti lisage '
” element eelmises etapis märgitud elemendis. - JS-koodis avage „
” element. Rakendage ka ' hasClass() ” meetod, et otsida toodud elemendis märgitud klassi. - Selle tulemusel hoiatatakse endist sõnumit rahuldatud tingimuse kohta.
- Teisel juhul kuvatakse viimane väide.
Väljund
Ülaltoodud väljund tähendab, et soovitud nõue on täidetud.
Järeldus
' klassiloend ' vara ja ' sisaldab() ' meetod, ' getElementsByTagName() ” ja „ vaste() ” meetodid või „ jQuery ” saab kasutada JavaScripti abil kontrollimaks, kas kehal on konkreetne klass. Neid lähenemisviise saab kasutada elemendis konkreetse klassi otsimiseks, viidates vastavale elemendile otse, selle sildi abil või kasutades jQuery meetodit. Selles ajaveebis selgitati, kuidas kontrollida, kas kehal on JavaScriptis konkreetne klass