W tym artykule zademonstrujemy metody sprawdzania, czy ciało ma określoną klasę przy użyciu języka JavaScript.
Jak sprawdzić, czy Body ma określoną klasę za pomocą JavaScript?
Aby sprawdzić, czy treść ma określoną klasę za pomocą JavaScript, zastosuj następujące podejścia:
- “ lista klas „własność” i „ zawiera() ' metoda.
- “ getElementsByTagName() ' oraz ' mecz() metody.
- “ jQuery ”.
Zilustrujmy każde z podejść jeden po drugim!
Podejście 1: Sprawdź, czy Body ma określoną klasę w JavaScript przy użyciu właściwości classList i metod zawiera ().
„ lista klas ” podaje nazwy klas CSS elementu. Natomiast ' zawiera() ” zwraca wartość true, jeśli węzeł jest potomkiem. Te połączone metody można zastosować w celu uzyskania dostępu do klasy zawartej w skojarzonym elemencie.
Składnia
węzeł. zawiera ( nagi )
W powyższej składni:
- “ nagi ” odpowiada potomkowi węzła powiązanego węzła.
Przykład
Przyjrzyjmy się poniższemu przykładowi:
< środek >< ciało klasa = 'zawierać' >
< h2 > To jest strona Linuxhint h2 >
środek > ciało >
< typ skryptu = „tekst/javascript” >
jeśli ( dokument. ciało . lista klas . zawiera ( 'zawierać' ) ) {
konsola. dziennik ( „Element ciała ma klasę” ) ;
}
w przeciwnym razie {
konsola. dziennik ( „Element body nie ma klasy” ) ;
}
scenariusz >
Zastosuj poniższe kroki, jak podano w powyższym kodzie:
- Po pierwsze, dołącz „
” element posiadający ustawiony atrybut „ klasa ”. - Dodaj także nagłówek w obrębie określonego elementu (
). - W kodzie JS zastosuj „ lista klas ” nieruchomość połączona z „ zawiera() ' metoda.
- Spowoduje to dostęp do klasy powiązanej „
” na podstawie podanej nazwy klasy w parametrze metody. - Po spełnieniu warunku „ jeśli ” warunek zostanie wykonany.
- Przeciwnie, „ w przeciwnym razie ” blok kodu instrukcji zostanie wykonany.
Wyjście
Na powyższym wyjściu widać, że dana klasa jest zawarta w „
Podejście 2: Sprawdź, czy Body ma określoną klasę w JavaScript za pomocą metod getElementsByTagName() i match()
„ getElementsByTagName() ” daje kolekcję wszystkich elementów posiadających określoną nazwę znacznika. „ mecz() ” dopasowuje określoną wartość do ciągu. Metody te można wykorzystać do uzyskania dostępu do wymaganego elementu za pomocą jego znacznika i sprawdzenia określonej klasy.
Składnia
dokument. getElementsByTagName ( etykietka )W podanej składni:
- “ etykietka ” reprezentuje nazwę znacznika elementu.
Przykład
Poniższy przykład ilustruje omawianą koncepcję:
< img src = 'szablon2.png' wzrost = „150 pikseli” szerokość = „150 pikseli” >
środek > ciało >
< typ skryptu = „tekst/javascript” >
wynajmować Dostawać = dokument. getElementsByTagName ( 'ciało' ) [ 0 ] . Nazwa klasy . mecz ( /zawiera/ )
jeśli ( Dostawać ) {
konsola. dziennik ( „Element ciała ma klasę” ) ;
}
w przeciwnym razie {
konsola. dziennik ( „Element body nie ma klasy” ) ;
}
scenariusz >
W powyższym fragmencie kodu:
- Podobnie należy dołączyć „
” element posiadający określoną klasę. - Umieść również obraz o wymiarach ustawionych w elemencie podanym w poprzednim kroku.
- W wierszach kodu JavaScript uzyskaj dostęp do „
” element według jego znacznika, używając „ getElementsByTagName() ' metoda. - „ [0] ” wskazuje, że zostanie pobrany pierwszy element odpowiadający tagowi podanemu w poprzednim kroku.
- „ Nazwa klasy „własność” i „ mecz() ” dopasuje podaną klasę w swoim parametrze do „
' element. - Dawne oświadczenie w „ jeśli Warunek ” zostanie wykonany po spełnieniu wszystkich warunków w poprzednich krokach.
- W przeciwnym razie zostanie wyświetlone ostatnie stwierdzenie.
Wyjście
Powyższe dane wyjściowe wskazują, że spełniony jest zastosowany warunek dla określonej klasy.
Podejście 3: Sprawdź, czy Body ma określoną klasę w JavaScript przy użyciu jQuery
Takie podejście można zaimplementować, aby uzyskać bezpośredni dostęp do wymaganego elementu i zlokalizować określoną klasę względem niego za pomocą jego metody.
Przykład
Przeanalizujmy poniższy przykład:
< środek >< ciało klasa = 'zawiera' >
< symbol zastępczy pola tekstowego = 'Wpisz dowolny tekst...' > pole tekstowe >
środek > ciało >
jeśli ( $ ( 'ciało' ) . maKlasę ( 'zawiera' ) ) {
alarm ( „Element ciała ma klasę” )
}
w przeciwnym razie {
alarm ( „Element body nie ma klasy” )
}
scenariusz >
W powyższych liniach kodu:
- Zawierać ' jQuery ” do korzystania z jej funkcjonalności.
- Podobnie należy uwzględnić „
” element posiadający określoną klasę. - Dodaj także „
” w elemencie podanym w poprzednim kroku. - W kodzie JS uzyskaj dostęp do „
' element. Zastosuj również „ maKlasę() ”, aby wyszukać określoną klasę w pobranym elemencie. - Spowoduje to ostrzeżenie poprzedniego komunikatu o spełnieniu warunku.
- W drugim przypadku zostanie wyświetlone ostatnie stwierdzenie.
Wyjście
Powyższy wynik oznacza, że pożądane wymaganie zostało osiągnięte.
Wniosek
„ lista klas „własność” i „ zawiera() „metoda”, „ getElementsByTagName() ' oraz ' mecz() ” metody lub „ jQuery ” można użyć do sprawdzenia, czy ciało ma określoną klasę za pomocą JavaScript. Podejścia te można wykorzystać do wyszukiwania określonej klasy w elemencie, odwołując się bezpośrednio do odpowiedniego elementu, za pomocą jego znacznika lub przy użyciu metody jQuery. Na tym blogu wyjaśniono, jak sprawdzić, czy ciało ma określoną klasę w JavaScript