Ellenőrizze, hogy a törzsnek van-e meghatározott osztálya JavaScript használatával

Ellenorizze Hogy A Torzsnek Van E Meghatarozott Osztalya Javascript Hasznalataval



A weboldal vagy az oldal tervezése során lehetőség nyílik arra, hogy a hasonló funkciókat a fejlesztő végén egy dedikált osztályhoz sorolják. Például egy adott weboldal hozzárendelése ugyanahhoz az elemhez, de külön osztályhoz, hogy a dolgok relevánsak legyenek. Ilyen helyzetekben annak ellenőrzése, hogy egy testnek van-e meghatározott osztálya, segít a különféle funkciók egyszerű elérésében és a frissítési folyamatokban is.

Ez a cikk bemutatja azokat a megközelítéseket, amelyek segítségével ellenőrizhető, hogy egy törzsnek van-e egy adott osztálya JavaScript használatával.

Hogyan ellenőrizhető, hogy a testnek van-e meghatározott osztálya JavaScript használatával?

Ha ellenőrizni szeretné, hogy egy törzsnek van-e egy adott osztálya JavaScript használatával, használja a következő megközelítéseket:





  • ' osztálylista ' ingatlan és ' tartalmazza () ” módszerrel.
  • ' getElementsByTagName() ” és „ mérkőzés() ” módszerekkel.
  • ' jQuery ”.

Illusztráljuk az egyes megközelítéseket egyenként!



1. megközelítés: Ellenőrizze, hogy a törzsnek van-e meghatározott osztálya a JavaScriptben a classList tulajdonság és a tartalmazza() metódusok használatával

Az ' osztálylista ” tulajdonság megadja egy elem CSS osztályának nevét. mivel a „ tartalmazza () ” metódus igazat ad, ha egy csomópont leszármazottja. Ezek a metódusok kombinálva alkalmazhatók a társított elemben lévő osztály eléréséhez.



Szintaxis



csomópont. tartalmaz ( meztelen )

A fenti szintaxisban:

  • ' meztelen ” a társított csomópont leszármazottjának felel meg.

Példa
Tekintsük át az alábbi példát:



< központ >< test osztály = 'tartalmaz' >
< h2 > Ez a Linuxhint webhely h2 >
központ > test >
< script típus = 'text/javascript' >
ha ( dokumentum. test . osztálylista . tartalmaz ( 'tartalmaz' ) ) {
konzol. log ( 'A test elemnek osztálya van' ) ;
}
más {
konzol. log ( 'A test elemnek nincs osztálya' ) ;
}
forgatókönyv >

Alkalmazza az alábbi lépéseket a fenti kódban megadottak szerint:

  • Először is írjon be egy „ ' elem a set attribútummal ' osztály ”.
  • Ezenkívül adjon hozzá egy fejlécet az adott elemhez ( ).
  • A JS kódban alkalmazza a „ osztálylista ' ingatlan kombinálva a ' tartalmazza () ” módszerrel.
  • Ennek eredményeként hozzáférhet a társított ' ” elemet a metódus paraméterében megadott osztálynév alapján.
  • Megelégedett feltétel esetén a „ ha ” feltétel végrehajtásra kerül.
  • Ezzel szemben a „ más ” utasítás kódblokk fog végrehajtódni.

Kimenet

A fenti kimenetben látható, hogy az adott osztály benne van a „ ” elemet.

2. megközelítés: A getElementsByTagName() és match() metódusok segítségével ellenőrizze, hogy a törzsnek van-e meghatározott osztálya a JavaScriptben

Az ' getElementsByTagName() ” metódus egy adott címkenévvel rendelkező összes elem gyűjteményét adja. Az ' mérkőzés() ” metódus egyezteti a megadott értéket a karakterlánccal. Ezekkel a metódusokkal elérhetjük a kívánt elemet a címkéjével, és ellenőrizhetjük az adott osztályt.

Szintaxis

dokumentum. getElementsByTagName ( címke )

A megadott szintaxisban:

  • ' címke ” az elem címkenevét jelenti.

Példa
A következő példa a tárgyalt koncepciót mutatja be:

< központ >< test osztály = 'tartalmaz' >
< img src = 'template2.png' magasság = '150 képpont' szélesség = '150 képpont' >
központ > test >
< script típus = 'text/javascript' >
hagyja kap = dokumentum. getElementsByTagName ( 'test' ) [ 0 ] . osztály név . mérkőzés ( /tartalmazza/ )
ha ( kap ) {
konzol. log ( 'A test elemnek osztálya van' ) ;
}
más {
konzol. log ( 'A test elemnek nincs osztálya' ) ;
}
forgatókönyv >

A fenti kódrészletben:

  • Hasonlóképpen adjon meg egy „ ” elem, amelynek a megadott osztálya van.
  • Ezenkívül tartalmazzon egy képet a beállított méretekkel az előző lépésben megadott elemen belül.
  • A JavaScript kódsoraiban nyissa meg a „ ' elem a címkéjével a ' getElementsByTagName() ” módszerrel.
  • Az ' [0] ” azt jelzi, hogy az előző lépésben megadott címkének megfelelő első elem lesz letöltve.
  • Az ' osztály név ' ingatlan és a ' mérkőzés() ' metódus illeszkedik a paraméterében megadott osztályhoz a ' ” elemet.
  • A korábbi nyilatkozat a „ ha ” feltétel az előző lépésekben szereplő összes feltétel teljesülése esetén fog végrehajtódni.
  • Ellenkező esetben az utóbbi utasítás jelenik meg.

Kimenet

A fenti kimenet azt jelzi, hogy az adott osztályra alkalmazott feltétel teljesül.

3. megközelítés: A jQuery segítségével ellenőrizze, hogy a törzsnek van-e meghatározott osztálya a JavaScriptben

Ezt a megközelítést úgy lehet megvalósítani, hogy a kívánt elemet közvetlenül elérjük, és metódusa segítségével egyszerűen megkeressük vele szemben az adott osztályt.

Példa
Nézzük végig az alábbi példát:

< script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' > forgatókönyv >
< központ >< test osztály = 'tartalmaz' >
< textarea helyőrző = 'Gépeljen be bármilyen szöveget...' > textarea >
központ > test >

ha ( $ ( 'test' ) . hasClass ( 'tartalmaz' ) ) {
éber ( 'A test elemnek osztálya van' )
}
más {
éber ( 'A test elemnek nincs osztálya' )
}
forgatókönyv >

A fenti kódsorokban:

  • Tartalmazza a ' jQuery ” könyvtár funkcióinak hasznosítására.
  • Hasonlóképpen vegye fel a „ ” elem, amelynek a megadott osztálya van.
  • Adjon hozzá egy „