Provjerite ima li tijelo određenu klasu pomoću JavaScripta

Provjerite Ima Li Tijelo Odredenu Klasu Pomocu Javascripta



Tijekom dizajniranja web-stranice ili web-mjesta, može postojati mogućnost sortiranja sličnih funkcionalnosti prema namjenskoj klasi na strani programera. Na primjer, dodjeljivanje određene web stranice istom elementu, ali s različitom klasom kako bi stvari bile relevantne. U takvim situacijama, provjera ima li tijelo određenu klasu pomaže u jednostavnom pristupu različitim funkcionalnostima, kao iu procesima ažuriranja.

Ovaj će članak pokazati pristupe za provjeru ima li tijelo određenu klasu pomoću JavaScripta.

Kako provjeriti ima li tijelo određenu klasu pomoću JavaScripta?

Da biste provjerili ima li tijelo određenu klasu pomoću JavaScripta, primijenite sljedeće pristupe:





  • “ classList ' vlasništvo i ' sadrži () ” metoda.
  • “ getElementsByTagName() ' i ' odgovara() ” metode.
  • “ jQuery ”.

Ilustrirajmo svaki od pristupa jedan po jedan!



Pristup 1: Provjerite ima li Body određenu klasu u JavaScriptu koristeći svojstvo classList i metode contains()

' classList ” svojstvo daje nazive CSS klasa elementa. dok je ' sadrži () ” metoda daje true ako je čvor potomak. Kombinacija ovih metoda može se primijeniti za pristup sadržanoj klasi u pridruženom elementu.



Sintaksa



čvor. sadrži ( goli )

U gornjoj sintaksi:

  • “ goli ” odgovara čvoru potomku pridruženog čvora.

Primjer
Pogledajmo dolje navedeni primjer:



< centar >< tijelo razreda = 'sadržati' >
< h2 > Ovo je web mjesto Linuxhint h2 >
centar > tijelo >
< vrsta skripte = 'tekst/javascript' >
ako ( dokument. tijelo . classList . sadrži ( 'sadržati' ) ) {
konzola. log ( 'Element tijela ima klasu' ) ;
}
drugo {
konzola. log ( 'Element tijela nema klasu' ) ;
}
skripta >

Primijenite dolje navedene korake, kako je navedeno u gornjem kodu:

  • Prvo uključite ' 'element koji ima atribut set' razreda ”.
  • Također dodajte naslov unutar određenog elementa ( ).
  • U JS kodu primijenite ' classList ' svojstvo u kombinaciji s ' sadrži () ” metoda.
  • Ovo će rezultirati pristupom klasi pridruženog ' ” element na temelju navedenog naziva klase u parametru metode.
  • Nakon ispunjenog uvjeta, ' ako ” uvjet će se izvršiti.
  • Suprotno tome, „ drugo ” izvršit će se blok koda naredbe.

Izlaz

U gornjem izlazu može se vidjeti da je određena klasa uključena u ' ” element.

Pristup 2: Provjerite ima li tijelo određenu klasu u JavaScriptu pomoću metoda getElementsByTagName() i match()

' getElementsByTagName() ” metoda daje kolekciju svih elemenata koji imaju određeni naziv oznake. ' odgovara() ” metoda podudara navedenu vrijednost s nizom. Ove se metode mogu koristiti za pristup potrebnom elementu prema njegovoj oznaci i provjeru određene klase.

Sintaksa

dokument. getElementsByTagName ( označiti )

U navedenoj sintaksi:

  • “ označiti ” predstavlja naziv oznake elementa.

Primjer
Sljedeći primjer pokazuje razmatrani koncept:

< centar >< tijelo razreda = 'sadrži' >
< img src = 'template2.png' visina = '150 px' širina = '150 px' >
centar > tijelo >
< vrsta skripte = 'tekst/javascript' >
neka dobiti = dokument. getElementsByTagName ( 'tijelo' ) [ 0 ] . naziv klase . odgovarati ( /sadrži/ )
ako ( dobiti ) {
konzola. log ( 'Element tijela ima klasu' ) ;
}
drugo {
konzola. log ( 'Element tijela nema klasu' ) ;
}
skripta >

U gornjem isječku koda:

  • Isto tako, uključite ' ” element koji ima navedenu klasu.
  • Također, sadržavati sliku zadanih dimenzija unutar navedenog elementa u prethodnom koraku.
  • U JavaScript redcima koda pristupite ' ' po svojoj oznaci koristeći ' getElementsByTagName() ” metoda.
  • ' [0] ” označava da će prvi element koji odgovara navedenoj oznaci u prethodnom koraku biti dohvaćen.
  • ' naziv klase ' vlasništvo i ' odgovara() ' metoda će se podudarati za navedenu klasu u svom parametru u odnosu na ' ” element.
  • Prethodna izjava u “ ako ” uvjet će se izvršiti nakon što su zadovoljeni svi uvjeti u prethodnim koracima.
  • U protivnom će se prikazati potonja izjava.

Izlaz

Gornji izlaz pokazuje da je primijenjeni uvjet za određenu klasu zadovoljen.

Pristup 3: Provjerite ima li tijelo određenu klasu u JavaScriptu pomoću jQueryja

Ovaj se pristup može implementirati za izravan pristup potrebnom elementu i lociranje određene klase u odnosu na njega uz pomoć njegove metode jednostavno.

Primjer
Prođimo kroz dolje navedeni primjer:

< skripta src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' > skripta >
< centar >< tijelo razreda = 'sadrži' >
< rezervirano mjesto textarea = 'Upišite bilo koji tekst...' > tekstualno područje >
centar > tijelo >

ako ( $ ( 'tijelo' ) . hasClass ( 'sadrži' ) ) {
uzbuna ( 'Element tijela ima klasu' )
}
drugo {
uzbuna ( 'Element tijela nema klasu' )
}
skripta >

U gornjim redcima koda:

  • Uključi ' jQuery ” za korištenje njezinih funkcija.
  • Slično, uključite ' ” element koji ima navedenu klasu.
  • Također dodajte '