Sprawdź, czy element zawiera klasę w JavaScript

Korzystanie z klas w HTML pozwala na grupowanie elementów i mieć taki sam styl lub funkcjonalność. W rezultacie zmiana zachowania wszystkich elementów uczestniczących w klasie jest tak łatwa, jak pisanie lub zmiana pojedynczego wiersza kodu. W niektórych przypadkach, takich jak aktualizacja stylu, użytkownicy mogą wymagać sprawdzenia, czy dana klasa jest częścią elementu, czy nie.

Ten samouczek ilustruje, jak sprawdzić, czy element zawiera klasę w JavaScript.

Jak sprawdzić, czy element zawiera klasę w JavaScript?

Aby sprawdzić, czy element zawiera klasę, użyj następujących metod:

• zawiera metodę ()
• Metoda matches ()

Zrozumiemy indywidualnie działanie tych metod.

Metoda 1: Sprawdź, czy element zawiera klasę przy użyciu metody zawiera ()

„„zawiera()„Metoda„Lista klas„Obiekt może być użyty do sprawdzenia, czy element ma określoną nazwę klasy. Jest to jedna z najpopularniejszych metod wykorzystywanych do określenia klasy elementu.

Składnia
Postępuj zgodnie z podaną składnią dla metody Contenains ():

element.Lista klas.zawiera („nazwa klas”)

Tutaj,

• "element”To element HTML, który zostanie sprawdzony, czy zawiera tę konkretną klasę.
• „„Nazwa klasy”Zidentyfikuj nazwę klasy CSS, w której element jest częścią

Wartość zwracana
Jeśli element ma nazwę klasy, zwraca „PRAWDA”, W przeciwnym razie oddaje„FAŁSZ".

Przykład
Utwórz przycisk z klasami „rozmiar guzika" I "ButtonStyle„Do stylizacji przycisku. Dołącz „na kliknięcie”Wydarzenie z przyciskiem, które uruchamia funkcję, aby sprawdzić, czy określona klasa jest częścią elementu przycisku, czy nie:

Przycisk

Przed kodem JavaScript wyjście będzie wyglądało tak:

W pliku JavaScript po prostu napisz te wiersze kodu:

funkcja classCheck ()
const ElementClass = Dokument.querySelelect („przycisk”);
if (klasa elementu.Lista klas.zawiera („ButtonStyle”))
alarm („Tak! przycisk zawiera tę klasę „ButtonStyle”);

W powyższym kodzie:

• Zdefiniuj funkcję „classCheck ()„To zostanie uruchomione na kliknięciu przycisku.
• Następnie pobieraj przycisk za pomocą „QuerySelelect ()„Metoda i przechowuj w zmiennej”klasa elementu".
• Zadzwoń do "zawiera()„Metoda, przekazując określoną nazwę klasy, taką jak„ButtonStyle„Co sprawdzi, czy jest to część przycisku, czy nie.
• Jeśli powróci „PRAWDA”, Zostanie wyświetlona wiadomość ostrzegawcza:

Wyjście

Powyższe wyjście wskazuje, że po kliknięciu przycisku pokazuje, że ma on „ButtonStyle" klasa.

Metoda 2: Sprawdź, czy element zawiera klasę przy użyciu metody Matches ()

Istnieje inna metoda „mecze()”, To określi, czy element ma określoną klasę, czy nie. Potrzeba jednego parametru, nazwa klasy, aby sprawdzić, czy element zawiera tę klasę, czy nie.

Składnia
Do metody Matches () wykorzystywana jest następująca składnia:

element.mecze('.Nazwa klasy')

W powyższej składni,

• „„element”Jest elementem HTML, który zostanie sprawdzony, czy zawiera tę konkretną klasę, czy nie.
• „„Nazwa klasy”Wskazuje nazwę klasy CSS, że element jest częścią. Nazwa klasy jest przekazywana do metody Matches () z kropką (.) To identyfikuje „klasa".

Wartość zwracana
Powraca także „PRAWDA”Jeśli element ma klasę inną,„FAŁSZ”Jest zwrócony.

Przykład
W pliku JavaScript użyj podanych wierszy kodu, aby sprawdzić, czy element ma określoną klasę, czy nie, wywołując metodę Matches ():

funkcja classCheck ()
const ElementClass = Dokument.querySelelect („przycisk”);
if (klasa elementu.mecze('.ButtonStyle '))
alarm („Tak! przycisk zawiera tę klasę „ButtonStyle”);

W powyższym fragmencie kodu:

• Najpierw zdefiniuj funkcję „classCheck ()„To zostanie uruchomione na kliknięciu przycisku.
• Następnie pobieraj przycisk za pomocą „QuerySelelect ()„Metoda i przechowuj w zmiennej”klasa elementu".
• Zadzwoń do "mecze()„Metoda, przekazując określoną nazwę klasy, tak jak tutaj,„ButtonStyle”Z kropką (.) przed nim, co wskazuje, że jest to klasa i sprawdź, czy jest to część przycisku, czy nie.
• Jeśli metoda Matches () zwraca „PRAWDA”, Wiadomość alertu„Tak! przycisk zawiera tę klasę „ButtonStyle”" zostanie wyświetlone:

Wyjście

Wniosek

Aby sprawdzić, czy element zawiera klasę, użyj JavaScript „zawiera()”Metoda lub„mecze()" metoda. Metoda zawierająca () jest najczęściej stosowaną metodą do określenia klasy elementu. Obie metody powracają „PRAWDA„Jeśli element ma klasę inną”FAŁSZ”Jest zwrócony. Ten samouczek zilustrował, jak sprawdzić, czy element zawiera klasę w JavaScript, czy nie ze szczegółowymi przykładami.