Dodaj klasę, aby kliknąć element za pomocą JavaScript

Podczas tworzenia responsywnej strony internetowej lub witryny może istnieć wymóg dołączania różnych funkcji lub efektów na działanie użytkownika lub automatycznie. Na przykład wyróżnienie określonej sekcji lub elementu po kliknięciu/nachyleniu. W takich sytuacjach dodanie klasy do klikniętego elementu za pomocą JavaScript ma doskonałą pomoc w angażowaniu użytkowników na witrynę i wyróżnianie go (witryna).

W tym zapisie omówi podejścia do dodania klasy do klikniętego elementu za pomocą JavaScript.

Jak dodać klasę, aby kliknąć element za pomocą JavaScript?

„„addEventListener ()„Metoda, w połączeniu z„Lista klas„Własność i„ „dodać()„Metoda, można zastosować, aby dodać klasę do klikniętego elementu za pomocą JavaScript.

Metoda addEventListener () kojarzy zdarzenie z elementem. Właściwość klasy klasy podaje nazwy klas CSS elementu. Podczas gdy add () to metoda listy klasy używana do dodawania tokenów do listy.

Podejścia te można zastosować w celu dołączenia zdarzenia i dodania klasy do elementów (elementów) na podstawie tego zdarzenia.

Składnia

element.addEventListener (zdarzenie, słuchaj, użyj);

W podanej składni:

• "wydarzenie”Odnosi się do określonego wydarzenia.
• "Słuchać”To funkcja, którą należy wywołać.
• "używać”To opcjonalna wartość.

Opracujmy tę koncepcję za pomocą następujących przykładów!

Przykład 1: Dodaj pojedynczą klasę, aby kliknąć element w JavaScript

W tym przykładzie zostanie dodana pojedyncza klasa do klikniętego elementu:

Kliknij

W powyższym fragmencie kodu:

• Po pierwsze, dołącz „" I "”Elementy, które mają odpowiednio podane klasy.
• Dołącz także przycisk w następnym kroku.
• W bloku kodu JS zastosuj „addEventListener ()„Metoda dołączenia zdarzenia”Kliknij„Do funkcji o nazwie„klasa".
• Przejdź także obiekt „wydarzenie”Jako parametr funkcji.
• W definicji funkcji skojarz „wydarzenie„Obiekt z„cel" nieruchomość. Te podejścia uzyskują dostęp do elementów DOM na wyzwalaczu zdarzenia.
• W rezultacie powiązane „Lista klas”Własność i„dodać()”Metoda doda określoną klasę do elementów (ów) po kliknięciu.
• W kodzie CSS stygnij klasę do dołączenia, i.mi., Dodano klasę.

Wyjście

Jak zaobserwowano w powyższym wyjściu, po kliknięciu elementów, konkretna klasa jest dodawana do elementów.

Przykład 2: Dodaj wiele klas, aby kliknąć element w JavaScript

W tym konkretnym przykładzie wiele klas zostanie dodanych do klikniętych elementów:

Witryna Linuxhint

JavaScript

Blogi

Zastosuj następujące kroki, jak podano w powyższym kodzie:

• Uwzględnij podane „

  ”Elementy mające określone klasy.

• Podobnie w bloku kodu JavaScript załącz zdarzenie „Kliknij„Do funkcji klas Classclicked () za pomocą„addEventListener ()" metoda.
• Przypomnijmy omawiane podejścia do dostępu do elementów DOM.
• Teraz zastosuj „Lista klas”Własność i„dodać()„Metoda posiadająca wiele klas jako parametrów.
• Spowoduje to dołączenie wielu klas do klikniętego elementu (.
• W kodzie CSS określ klasy, które należy dodać do elementu (i wykonaj określoną stylistykę.

Wyjście

W tym konkretnym wyjściu wiele klas jest dołączanych do każdego z „> ”Elementy na spust wydarzenia.

Wniosek

„„addEventListener ()„Metoda, w połączeniu z„Lista klas„Własność i„ „dodać()„Metoda, można zastosować, aby dodać klasę do klikniętego elementu za pomocą JavaScript. Podejścia te można wdrożyć w celu dodania pojedynczych lub wielu klas do elementów (-ów) na podstawie załączonego zdarzenia. Ten zapis wykazał, aby dodać klasę do klikniętego elementu za pomocą JavaScript.