Tämä artikkeli esittelee lähestymistapoja tarkistaa, onko rungolla tietty luokka JavaScriptin avulla.
Kuinka tarkistaa, onko keholla tietty luokka JavaScriptin avulla?
Voit tarkistaa, onko rungolla tietty luokka JavaScriptin avulla, käyttämällä seuraavia lähestymistapoja:
- ' luokkaluettelo ' omaisuutta ja ' sisältää() ”menetelmä.
- ' getElementsByTagName() ' ja ' ottelu() ”menetelmiä.
- ' jQuery ”.
Havainnollistetaan jokainen lähestymistapa yksitellen!
Lähestymistapa 1: Tarkista, onko rungolla tietty luokka JavaScriptissä käyttämällä classList-ominaisuutta ja sisältää()-metodeja
' luokkaluettelo ”-ominaisuus antaa elementin CSS-luokan nimet. Kun taas ' sisältää() ”-menetelmä antaa tosi, jos solmu on jälkeläinen. Näitä yhdistettyjä menetelmiä voidaan käyttää liitetyn elementin sisältämään luokkaan pääsemiseksi.
Syntaksi
solmu. sisältää ( alasti )
Yllä olevassa syntaksissa:
- ' alasti ” vastaa liittyvän solmun jälkeläistä solmua.
Esimerkki
Katsotaanpa alla olevaa esimerkkiä:
< keskusta >< kehon luokkaa = 'sisältää' >
< h2 > Tämä on Linuxhint-verkkosivusto h2 >
keskusta > kehon >
< skriptityyppi = 'teksti/javascript' >
jos ( asiakirja. kehon . luokkaluettelo . sisältää ( 'sisältää' ) ) {
konsoli. Hirsi ( 'Kehoelementillä on luokka' ) ;
}
muu {
konsoli. Hirsi ( 'Kehoelementillä ei ole luokkaa' ) ;
}
käsikirjoitus >
Suorita alla mainitut vaiheet yllä olevan koodin mukaisesti:
- Lisää ensin ' ' elementti jolla on set-attribuutti ' luokkaa ”.
- Lisää myös otsikko tiettyyn elementtiin ( ).
- Käytä JS-koodissa ' luokkaluettelo ' kiinteistö yhdistettynä ' sisältää() ”menetelmä.
- Tämä johtaa pääsyn siihen liittyvän ' ”-elementti menetelmän parametrissa määritetyn luokan nimen perusteella.
- Kun tilanne on täytetty, ' jos ”ehto toteutuu.
- Sitä vastoin ' muu ” lausekekoodilohko suoritetaan.
Lähtö
Yllä olevasta tuloksesta voidaan nähdä, että tietty luokka sisältyy ' ”elementtiä.
Lähestymistapa 2: Tarkista, onko rungolla tietty luokka JavaScriptissä käyttämällä getElementsByTagName()- ja match()-menetelmiä
' getElementsByTagName() ” -menetelmä antaa kokoelman kaikista elementeistä, joilla on tietty tunnisteen nimi. ' ottelu() ” -menetelmä vastaa määritetyn arvon merkkijonon kanssa. Näitä menetelmiä voidaan käyttää haluttuun elementtiin sen tunnisteen avulla ja tietyn luokan tarkistamiseen.
Syntaksi
asiakirja. getElementsByTagName ( tag )Annetussa syntaksissa:
- ' tag ' edustaa elementin tunnisteen nimeä.
Esimerkki
Seuraava esimerkki havainnollistaa käsiteltyä konseptia:
< img src = 'template2.png' korkeus = '150px' leveys = '150px' >
keskusta > kehon >
< skriptityyppi = 'teksti/javascript' >
päästää saada = asiakirja. getElementsByTagName ( 'vartalo' ) [ 0 ] . luokan nimi . ottelu ( /sisältää/ )
jos ( saada ) {
konsoli. Hirsi ( 'Kehoelementillä on luokka' ) ;
}
muu {
konsoli. Hirsi ( 'Kehoelementillä ei ole luokkaa' ) ;
}
käsikirjoitus >
Yllä olevassa koodinpätkässä:
- Lisää myös ' ”-elementti, jolla on määritetty luokka.
- Sisällytä myös kuva, jonka mitat ovat edellisessä vaiheessa ilmoitetun elementin sisällä.
- Siirry JavaScript-koodiriveille ' ' -elementin tunnisteella käyttämällä ' getElementsByTagName() ”menetelmä.
- ' [0] ” tarkoittaa, että ensimmäinen elementti, joka vastaa edellisessä vaiheessa ilmoitettua tunnistetta, noudetaan.
- ' luokan nimi 'kiinteistö ja' ottelu() ' -menetelmä vastaa parametrissaan ilmoitettua luokkaa ' ”elementtiä.
- Edellinen lausunto ' jos ” -ehto suoritetaan, kun kaikki edellisten vaiheiden ehdot täyttyvät.
- Muussa tapauksessa jälkimmäinen lausunto näytetään.
Lähtö
Yllä oleva tulos osoittaa, että tietylle luokalle asetettu ehto täyttyy.
Lähestymistapa 3: Tarkista, onko Bodylla tietty luokka JavaScriptissä jQueryn avulla
Tämä lähestymistapa voidaan toteuttaa pääsemään suoraan vaadittuun elementtiin ja paikantamaan tietty luokka sitä vastaan sen menetelmän avulla.
Esimerkki
Käydään läpi alla annettu esimerkki:
< keskusta >< kehon luokkaa = 'sisältää' >
< textarea paikkamerkki = 'Kirjoita mikä tahansa teksti...' > tekstialue >
keskusta > kehon >
jos ( $ ( 'vartalo' ) . hasClass ( 'sisältää' ) ) {
hälytys ( 'Kehoelementillä on luokka' )
}
muu {
hälytys ( 'Kehoelementillä ei ole luokkaa' )
}
käsikirjoitus >
Yllä olevilla koodiriveillä:
- Sisällytä ' jQuery ”-kirjasto hyödyntää sen toimintoja.
- Sisällytä vastaavasti ' ”-elementti, jolla on ilmoitettu luokka.
- Lisää myös '
”-elementti edellisessä vaiheessa mainitun elementin sisällä. - Avaa JS-koodissa ' ”elementtiä. Käytä myös ' hasClass() ” -menetelmä hakeaksesi ilmoitettua luokkaa haetusta elementistä.
- Tämän seurauksena aikaisempi viesti hälyttää tyytyväisestä tilasta.
- Toisessa tapauksessa jälkimmäinen lausunto näytetään.
Lähtö
Yllä oleva tulos tarkoittaa, että haluttu vaatimus saavutetaan.
Johtopäätös
' luokkaluettelo ' omaisuutta ja ' sisältää() 'menetelmä, ' getElementsByTagName() ' ja ' ottelu() 'menetelmiä tai ' jQuery ' -työkalua voidaan käyttää tarkistamaan, onko rungossa tietty luokka JavaScriptin avulla. Näitä lähestymistapoja voidaan käyttää etsimään tiettyä luokkaa elementistä viittaamalla vastaavaan elementtiin suoraan, sen tunnisteen avulla tai käyttämällä jQuery-menetelmää. Tämä blogi selitti tarkistaa, onko rungolla tietty luokka JavaScriptissä