Klicken Sie mit JavaScript Klick -Element an, das angeklickt wurde

Beim Erstellen einer reaktionsschnellen Webseite oder einer reaktionsschnellen Website muss verschiedene Funktionen oder Auswirkungen auf Benutzeraktion oder automatisch angehängt werden. Beispiel. In solchen Situationen ist das Hinzufügen von Klasse zu einem geklickten Element mit JavaScript von großer Hilfe, um die Benutzer auf einer Website einzubeziehen und es (Website) hervorzuheben.

In diesem Artikel werden die Ansätze zum Hinzufügen einer Klasse zu einem geklickten Element mit JavaScript diskutiert.

So fügen Sie mit JavaScript eine Klasse zum Klickelement hinzu?

Der "AddEventListener ()Methode in Kombination mit dem “Klasse”Eigentum und die“hinzufügen()Methode, kann angewendet werden, um mit JavaScript eine Klasse zum Klickelement hinzuzufügen.

Die Methode addEventListener () verbindet ein Ereignis mit einem Element. Die Classlist -Eigenschaft gibt den CSS -Klassennamen eines Elements an. Während der add () eine Classlist -Methode ist, mit der Token zur Liste hinzugefügt werden.

Diese Ansätze können angewendet werden, um ein Ereignis anzuhängen und dem auf diesem Ereignis basierenden Elemente eine Klasse hinzuzufügen.

Syntax

Element.AddEventListener (Ereignis, Hören, Verwendung);

In der angegebenen Syntax:

• “Fall”Bezieht sich auf das angegebene Ereignis.
• “HörenIst die Funktion, die aufgerufen werden muss.
• “verwenden”Ist der optionale Wert.

Lassen Sie uns das Konzept mit Hilfe der folgenden Beispiele erläutern!

Beispiel 1: Fügen Sie in JavaScript eine einzelne Klasse zum Element hinzu, das angeklickt wurde

In diesem Beispiel wird eine einzelne Klasse zu den geklickten Elementen hinzugefügt:

Klick mich

Im obigen Code -Snippet:

• Zunächst einschließen die “" Und "Elemente mit den angegebenen Klassen.
• Geben Sie auch im nächsten Schritt eine Schaltfläche an.
• Wenden Sie im JS -Code -Block das anAddEventListener ()"Methode zum Anhängen eines Ereignisses"klicken”Zu der namens Funktion“klassifiziert ()”.
• Übergeben Sie auch das Objekt “Fall”Als Parameter einer Funktion.
• In der Funktionsdefinition assoziieren Sie die “Fall"Objekt mit dem"Ziel" Eigentum. Diese Ansätze zugreifen auf die DOM -Elemente auf dem Ereignisauslöser.
• Folge, das Assoziierte “Klasse”Eigentum und“hinzufügen()Die Methode fügt die angegebene Klasse dem Element (en) beim Klicken hinzu.
• Im CSS -Code stylen Sie die angehängte Klasse, ich.e., hinzugefügt.

Ausgang

Wie in der obigen Ausgabe beobachtet, wird bei Klicken auf die Elemente die jeweilige Klasse zu den Elementen hinzugefügt.

Beispiel 2: Fügen Sie in JavaScript mehrere Klassen zum Element Klick hinzu

In diesem speziellen Beispiel werden mehrere Klassen zu den geklickten Elementen (n) hinzugefügt:

LinuxHint -Website

JavaScript

Blogs

Wenden Sie die folgenden Schritte an, wie im obigen Code angegeben:

• Die angegebenen einschließen “

  Elemente mit den angegebenen Klassen.

• Im JavaScript -Codeblock auch ein Ereignis anhängen “klicken”In die Funktion klassifiziert () mit dem“AddEventListener ()" Methode.
• Erinnern Sie sich an die diskutierten Ansätze zum Zugriff auf Elemente auf dem DOM.
• Wenden Sie nun das an “anKlasse”Eigentum und“hinzufügen()Methode mit mehreren Klassen als Parameter.
• Dies führt dazu, dass die angegebenen mehrere Klassen an das geklickte Element (en) angemeldet werden.
• Geben Sie im CSS -Code die Klassen an, die dem Element (n) hinzugefügt werden müssen, und führen Sie das angegebene Styling durch.

Ausgang

In dieser speziellen Ausgabe werden mehrere Klassen an die jeweils "angehängt"> ”Elemente auf dem Ereignisauslöser.

Abschluss

Der "AddEventListener ()Methode in Kombination mit dem “Klasse”Eigentum und die“hinzufügen()Methode, kann angewendet werden, um mit JavaScript eine Klasse zum Klickelement hinzuzufügen. Diese Ansätze können implementiert werden, um Elemente (n) einzelne oder mehrere Klassen basierend auf dem beigefügten Ereignis hinzuzufügen. Dieses Schreiben wurde nachgewiesen, dass sie mit JavaScript eine Klasse zum klickten Element hinzufügen sollen.