Z JavaScriptom preverite, ali ima Body določen razred

Z Javascriptom Preverite Ali Ima Body Dolocen Razred



Med načrtovanjem spletne strani ali spletnega mesta lahko obstaja možnost razvrščanja podobnih funkcij glede na namenski razred na strani razvijalca. Na primer, dodelitev določene spletne strani istemu elementu, vendar z ločenim razredom, da bodo stvari ustrezne. V takšnih situacijah preverjanje, ali ima telo določen razred, pomaga pri preprostem dostopu do različnih funkcionalnosti in tudi pri posodabljanju.

Ta članek bo prikazal pristope za preverjanje, ali ima telo določen razred z uporabo JavaScripta.

Kako preveriti, ali ima Body določen razred z uporabo JavaScripta?

Če želite preveriti, ali ima telo določen razred z uporabo JavaScripta, uporabite naslednje pristope:





  • “ classList ' lastnina in ' vsebuje() ” metoda.
  • “ getElementsByTagName() « in » ujemanje() ” metode.
  • “ jQuery ”.

Ponazorimo vsakega od pristopov enega za drugim!



Pristop 1: Preverite, ali ima Body specifičen razred v JavaScriptu z uporabo lastnosti classList in metod contains().

' classList ” lastnost podaja imena razredov CSS elementa. ker ' vsebuje() ” daje vrednost true, če je vozlišče potomec. Te kombinirane metode je mogoče uporabiti za dostop do vsebovanega razreda v povezanem elementu.



Sintaksa



vozlišče. vsebuje ( goli )

V zgornji sintaksi:

  • “ goli ” ustreza vozlišču, potomcu povezanega vozlišča.

Primer
Oglejmo si pregled spodnjega primera:



< center >< telo razred = 'vsebuje' >
< h2 > To je spletno mesto Linuxhint h2 >
center > telo >
< vrsta skripte = 'besedilo/javascript' >
če ( dokument. telo . classList . vsebuje ( 'vsebuje' ) ) {
konzola. dnevnik ( 'Element telesa ima razred' ) ;
}
drugače {
konzola. dnevnik ( 'Element telesa nima razreda' ) ;
}
scenarij >

Uporabite spodaj navedene korake, kot je navedeno v zgornji kodi:

  • Najprej vključite » element z atributom set razred ”.
  • Dodajte tudi naslov znotraj določenega elementa ( ).
  • V kodi JS uporabite » classList ' lastnost v kombinaciji z ' vsebuje() ” metoda.
  • To bo posledično dostopalo do razreda povezanega » ” element, ki temelji na podanem imenu razreda v parametru metode.
  • Ob izpolnjenem pogoju se ' če ” se bo izvršil pogoj.
  • Nasprotno, ' drugače ” se bo izvršil blok kode stavka.

Izhod

V zgornjem izhodu je razvidno, da je določen razred vključen v » ” element.

Pristop 2: Preverite, ali ima Body specifičen razred v JavaScriptu z uporabo metod getElementsByTagName() in match().

' getElementsByTagName() ” daje zbirko vseh elementov z določenim imenom oznake. ' ujemanje() ” ujema podano vrednost z nizom. Te metode je mogoče uporabiti za dostop do zahtevanega elementa z njegovo oznako in preverjanje določenega razreda.

Sintaksa

dokument. getElementsByTagName ( oznaka )

V navedeni sintaksi:

  • “ oznaka ” predstavlja ime oznake elementa.

Primer
Naslednji primer prikazuje obravnavani koncept:

< center >< telo razred = 'vsebuje' >
< img src = 'template2.png' višina = '150px' premer = '150px' >
center > telo >
< vrsta skripte = 'besedilo/javascript' >
pustiti dobiti = dokument. getElementsByTagName ( 'telo' ) [ 0 ] . className . tekma ( /vsebuje/ )
če ( dobiti ) {
konzola. dnevnik ( 'Element telesa ima razred' ) ;
}
drugače {
konzola. dnevnik ( 'Element telesa nima razreda' ) ;
}
scenarij >

V zgornjem delčku kode:

  • Podobno vključite » ” element, ki ima podani razred.
  • Vsebuje tudi sliko z nastavljenimi dimenzijami znotraj navedenega elementa v prejšnjem koraku.
  • V vrsticah kode JavaScript odprite » ' po njegovi oznaki z uporabo ' getElementsByTagName() ” metoda.
  • ' [0] ” označuje, da bo pridobljen prvi element, ki ustreza navedeni oznaki v prejšnjem koraku.
  • ' className » lastnina in » ujemanje() ' se bo ujemala za navedeni razred v svojem parametru z ' ” element.
  • Prejšnja izjava v “ če ” pogoj se bo izvršil, ko bodo izpolnjeni vsi pogoji v prejšnjih korakih.
  • V nasprotnem primeru bo prikazan zadnji stavek.

Izhod

Zgornji izhod kaže, da je uporabljeni pogoj za določen razred izpolnjen.

Pristop 3: Preverite, ali ima Body določen razred v JavaScriptu z uporabo jQuery

Ta pristop je mogoče implementirati za neposreden dostop do zahtevanega elementa in preprosto iskanje določenega razreda proti njemu s pomočjo njegove metode.

Primer
Oglejmo si spodnji primer:

< skript src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' > scenarij >
< center >< telo razred = 'vsebuje' >
< ograda besedilnega polja = 'Vnesite poljubno besedilo ...' > textarea >
center > telo >

če ( $ ( 'telo' ) . hasClass ( 'vsebuje' ) ) {
opozorilo ( 'Element telesa ima razred' )
}
drugače {
opozorilo ( 'Element telesa nima razreda' )
}
scenarij >

V zgornjih vrsticah kode:

  • Vključi » jQuery ” za uporabo njenih funkcij.
  • Podobno vključite » ” element z navedenim razredom.
  • Dodajte tudi »