Zkontrolujte, zda má tělo specifickou třídu pomocí JavaScriptu

Zkontrolujte Zda Ma Telo Specifickou Tridu Pomoci Javascriptu



Při navrhování webové stránky nebo webu může existovat možnost seřadit podobné funkce podle vyhrazené třídy na konci vývojáře. Například přiřazení konkrétní webové stránky ke stejnému prvku, ale s odlišnou třídou, aby byly věci relevantní. V takových situacích kontrola, zda má tělo specifickou třídu, pomáhá při snadném přístupu k různým funkcím a také v procesech aktualizace.

Tento článek demonstruje přístupy ke kontrole, zda má tělo konkrétní třídu pomocí JavaScriptu.

Jak zkontrolovat, zda má tělo specifickou třídu pomocí JavaScriptu?

Chcete-li zkontrolovat, zda má tělo konkrétní třídu pomocí JavaScriptu, použijte následující přístupy:







  • classList 'majetek a' obsahuje() “ metoda.
  • getElementsByTagName() ' a ' zápas() “ metody.
  • jQuery “.

Pojďme si každý z přístupů jeden po druhém ilustrovat!



Přístup 1: Zkontrolujte, zda má tělo specifickou třídu v JavaScriptu pomocí vlastnosti classList a metod obsahuje().

' classList Vlastnost ” udává názvy třídy CSS prvku. Vzhledem k tomu, že „ obsahuje() Metoda ” dává hodnotu true, pokud je uzel potomkem. Tyto kombinované metody lze použít pro přístup k obsažené třídě v přidruženém prvku.



Syntax





uzel. obsahuje ( nahý )

Ve výše uvedené syntaxi:

  • nahý ” odpovídá potomkovi uzlu přidruženého uzlu.

Příklad
Udělejme si přehled níže uvedeného příkladu:



< centrum < tělo třída = 'obsahovat' >
< h2 > Toto je web Linuxhint h2 >
centrum > tělo >
< typ skriptu = 'text/javascript' >
-li ( dokument. tělo . classList . obsahuje ( 'obsahovat' ) ) {
řídicí panel. log ( 'Prvek těla má třídu' ) ;
}
jiný {
řídicí panel. log ( 'Prvek těla nemá třídu' ) ;
}
skript >

Použijte níže uvedené kroky, jak je uvedeno ve výše uvedeném kódu:

  • Nejprve zahrňte „ 'prvek s atributem set' třída “.
  • Přidejte také nadpis do konkrétního prvku ( ).
  • V kódu JS použijte „ classList “ vlastnost kombinovaná s “ obsahuje() “ metoda.
  • Výsledkem bude přístup ke třídě přidruženého „ ” na základě zadaného názvu třídy v parametru metody.
  • Při splnění podmínky „ -li ” podmínka se provede.
  • Naopak, „ jiný ” bude proveden blok kódu příkazu.

Výstup

Ve výše uvedeném výstupu je vidět, že konkrétní třída je zahrnuta v „ prvek.

Přístup 2: Zkontrolujte, zda má tělo specifickou třídu v JavaScriptu pomocí metod getElementsByTagName() a match()

' getElementsByTagName() ” poskytuje kolekci všech prvků s konkrétním názvem tagu. ' zápas() ” metoda odpovídá zadané hodnotě s řetězcem. Tyto metody lze použít pro přístup k požadovanému prvku pomocí jeho tagu a kontrolu konkrétní třídy.

Syntax

dokument. getElementsByTagName ( štítek )

V poskytnuté syntaxi:

  • štítek “ představuje název tagu prvku.

Příklad
Následující příklad demonstruje diskutovanou koncepci:

< centrum < tělo třída = 'obsahuje' >
< img src = 'template2.png' výška = '150px' šířka = '150px' >
centrum > tělo >
< typ skriptu = 'text/javascript' >
nechat dostat = dokument. getElementsByTagName ( 'tělo' ) [ 0 ] . jméno třídy . zápas ( /obsahuje/ )
-li ( dostat ) {
řídicí panel. log ( 'Prvek těla má třídu' ) ;
}
jiný {
řídicí panel. log ( 'Prvek těla nemá třídu' ) ;
}
skript >

Ve výše uvedeném úryvku kódu:

  • Stejně tak zahrňte „ ” prvek se zadanou třídou.
  • Obsahujte také obrázek s nastavenými rozměry v rámci prvku uvedeného v předchozím kroku.
  • V řádcích kódu JavaScript přejděte na „ ” jeho tagem pomocí “ getElementsByTagName() “ metoda.
  • ' [0] ” znamená, že bude načten první prvek odpovídající uvedené značce v předchozím kroku.
  • ' jméno třídy nemovitost a zápas() ” metoda bude odpovídat pro uvedenou třídu ve svém parametru proti “ prvek.
  • Předchozí prohlášení v „ -li ” podmínka se provede po splnění všech podmínek v předchozích krocích.
  • V opačném případě se zobrazí druhý příkaz.

Výstup

Výše uvedený výstup indikuje, že aplikovaná podmínka pro konkrétní třídu je splněna.

Přístup 3: Zkontrolujte, zda má tělo specifickou třídu v JavaScriptu pomocí jQuery

Tento přístup lze implementovat pro přímý přístup k požadovanému prvku a nalezení konkrétní třídy proti němu pomocí jeho metody jednoduše.

Příklad
Pojďme si projít níže uvedený příklad:

< skript src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' > skript >
< centrum < tělo třída = 'obsahuje' >
< zástupný symbol textarea = 'Zadejte libovolný text...' > textarea >
centrum > tělo >

-li ( $ ( 'tělo' ) . hasClass ( 'obsahuje' ) ) {
upozornění ( 'Prvek těla má třídu' )
}
jiný {
upozornění ( 'Prvek těla nemá třídu' )
}
skript >

Ve výše uvedených řádcích kódu:

  • Zahrnout „ jQuery ” knihovny využívat její funkce.
  • Podobně zahrňte „ ” prvek s uvedenou třídou.
  • Přidejte také „