Sprawdź, czy konkretna klasa istnieje na stronie za pomocą JavaScript

Podczas opracowywania strony internetowej czasami programiści martwią się, dlaczego pożądany wynik nie jest wyświetlany na stronie, więc muszą sprawdzić, czy konkretna klasa jest dodawana do konkretnej strony lub elementu, czy nie. Aby to zrobić, JavaScript przedstawia pewne metody weryfikacji klasy elementu lub strony, takie jak metoda zawierająca () i właściwość długości za pomocą metody getEntsBassName ().

Ten blog zdefiniuje metody ustalenia, czy konkretna klasa istnieje na stronie za pomocą JavaScript.

Jak sprawdzić, czy konkretna klasa istnieje na stronie za pomocą JavaScript?

Aby sprawdzić, czy istnieje konkretna klasa, użyj następujących metod JavaScript:

• dokument.getElementsByClassName () z właściwością długości.
• zawiera metodę ()

Metoda 1: Sprawdź, czy na stronie istnieje konkretna/konkretna klasa za pomocą dokumentu.getElementsByClassName () z właściwością długości

Użyj "getElementsByClassName ()„Metoda z„długość”Własność w celu ustalenia, czy konkretna klasa istnieje na stronie, czy nie. Metoda getElementsBassName () służy do wyboru elementów o nazwie klasy, a następnie jest sprawdzana, czy atrybut długości kolekcji jest większy niż 0. Jeśli wyprowadzi „Tak”Klasa jest obecna na stronie.

Składnia

Postępuj zgodnie z podaną składnią do użycia metody getElementsBassName () z właściwością długości:

dokument.getElementsByClassName („ClassName”).długość

Przekaż nazwę klasy jako parametr, który należy zweryfikować.

Przykład

W pliku HTML najpierw zaprojektuj stronę. Tutaj dodamy obraz jako logo na nagłówku za pomocą elementu DIV i znacznika:

src = "https: // linuxhint.com/WP-Content/uploads/2019/11/Logo-Final.png " />

Następnie ustaw tytuł na nagłówku:

Sprawdź, czy konkretna klasa istnieje na stronie za pomocą JavaScript

Następnie utwórz przycisk na stronie, który wywoła „CheckClasseksists ()”Funkcja, która mówi, czy konkretna klasa istnieje na stronie, czy nie:

Kliknij tutaj!

Wykonanie powyższego kodu HTML podaje następującą stronę w przeglądarce:

Teraz, w pliku JavaScript lub znaczniku, użyj następującego kodu:

funkcja checkClassExists ()
const classCheck = dokument.getElementsByClassName („Flex-Item1”).długość> 0;
if (classCheck)
alert („✅ klasa„ flex-item1 ”istnieje na stronie”);
w przeciwnym razie
alert („⛔️ klasa„ Flex-Item1 ”nie istnieje na stronie”);

W powyższym kodzie:

• Najpierw zdefiniuj funkcję „CheckClasseksists ()„To wywoła kliknięcie przycisku.
• Utwórz zmienną, która przechowuje wynik, aby sprawdzić klasę „Flex-Item1”Za pomocą„getElementsByClassName ()”Metoda, a następnie sprawdź, czy kolekcja jest„długość„Atrybut jest większy niż 0.
• Teraz pokaż wiadomość ostrzeżeń o egzystencji klasowej, a nie istniała na stronie.
• Jeśli wynikowa wartość zmiennej jest większa niż 0, pokazuje „klasę”Flex-Item1 „istnieje na stronie".
• W przeciwnym razie komunikat o alercie pokaże „klasa "Flex-Item1 „nie istnieje na stronie".

Wyjście

Aby sprawdzić, czy określony element zawiera konkretną klasę w JavaScript, sprawdź następną sekcję.

Metoda 2: Sprawdź, czy konkretna klasa istnieje na stronie za pomocą metody zawiera ()

Aby ustalić, czy dana klasa istnieje na stronie internetowej, użyj „zawiera()„Metoda„Lista klas" nieruchomość. Przekaż nazwę klasy w metodzie zawierają () i daje to, czy nazwa klasy istnieje w określonym elemencie inaczej, zwraca false.

Składnia

Użyj następującej składni dla metody Contein ():

Lista klas.zawiera („ClassName”)

Przykład

Jak wiemy, cała zawartość strony internetowej znajduje się wewnątrz znacznika, więc najpierw przyniesiemy element ciała za pomocą jego przypisanego identyfikatora:

Kliknij tutaj!

Zdefiniuj funkcję i pobieraj element ciała, przekazując przypisany identyfikator „str" w "getElementById ()„Metoda, następnie wywołuje„zawiera()„Metoda, przekazując klasę”Divstyle„Aby sprawdzić, czy ta klasa istnieje w całym znaczniku, czy nie:

funkcja checkClassExists ()
const classCheck = dokument.getElementById („PG”);
if (klasa.Lista klas.zawiera („divstyle”))
alert („✅ klasa„ divstyle ”istnieje na stronie”);
w przeciwnym razie
alert („⛔️ klasa„ divstyle ”nie istnieje na stronie ');

Dane wyjściowe pokazuje, że „ciało”Element/znacznik nie zawiera„Divstyle" klasa:

Opracowaliśmy niezbędne informacje związane z weryfikacją konkretnej klasy na stronie za pomocą JavaScript.

Wniosek

Aby ustalić, czy konkretna klasa istnieje na stronie, skorzystaj z „dokument.getElementsByClassName ()„Metoda z„długość„Własność lub„zawiera()" metoda. Pierwsza metoda jest najczęściej stosowana w tym celu. Metoda zawierająca () jest stosowana dla dowolnego konkretnego elementu. Na tym blogu zdefiniowaliśmy metody ustalenia, czy konkretna klasa istnieje na stronie za pomocą JavaScript.