So simulieren Sie das Onclick -Event in CSS

Ein Klick auf ein Element löst das Onclick -Ereignis aus. Dieses Ereignis kann das Formular validieren, Warnmeldungen liefern und mehr. Kontrollkästchen in CSS sind der beste Weg, um Onclick -Ereignisse zu simulieren. Dieser Artikel zeigt, wie Sie das Onclick -Ereignis mit CSS simulieren können.

So simulieren Sie das Onclick -Event in CSS?

Um eine Onclick -Event -Kontrollkasten -Technik zu simulieren, wird verwendet. Bevor wir uns zuerst vorwärts bewegen, erfahren wir, was ein Kontrollkästchen ist.

Was ist ein Kontrollkästchen in CSS?

Das Kontrollkästchen ist eine Technik, die das Erscheinungsbild bestimmter Elemente steuern kann, z. B. die Sichtbarkeit von Registerkarten, Dropdown -Menüs und viele mehr.

Syntax

Die Syntax des Kontrollkästchens ist unten angegeben:

: Es wird verwendet, um die Eingabe vom Benutzer zu nehmen.

Ausweis: Es ist der Name der Klasse, die wir zugewiesen haben.

Lassen Sie uns zu dem praktischen Beispiel wechseln, in dem wir das Onclick -Ereignis auf ein Bild anwenden werden.

Beispiel: So simulieren Sie das Onclick -Event?

Hier werden wir:

• • Erstellen Sie ein Kontrollkästchen mit Tag und ID zuweisen “ONCLICK”Dazu.
  • Schreiben Sie ein Tag, das wie ID. Beide sollten gleich sein.
  • Fügen Sie ein Bild mit dem Tag ein:

Gehen Sie danach zum CSS und schreiben Sie den folgenden Code:

#onclick: Checked + Label> img
Breite: 100px;
Höhe: 75px;

Im oben genannten Code haben wir implementiert:

• • A ": überprüft"Selektor in der Klasse" genannt "ONCLICK”.
  • Wir haben ein Bild im Etikett mit dem + Operator ausgewählt.
  • Im nächsten Schritt haben wir die Höhe und Breite des Bildes zugewiesen.

Es gibt uns die folgende Ausgabe:

Die Ausgabe bestätigte, dass das Onclick -Ereignis erfolgreich auf das Bild angewendet wurde.

Abschluss

In CSS können wir das Onclick -Ereignis mit dem Kontrollkästchen simulieren. Fügen Sie dazu ein Kontrollkästchen mit dem Tag hinzu und weisen Sie ein “ein“ zu “Ausweis”Dazu. Erstellen Sie als nächstes ein Tag und weisen Sie ihm einen Wert zu wie “wie“Ausweis”. Fügen Sie in der CSS -Datei eine hinzu “: überprüftSelektor in der Zielklasse und wählen Sie das Bild im Etikett mit dem + Operator aus. In diesem Artikel wurde erläutert, wie das Onclick -Event mit CSS zusammen mit seinen Beispielen simuliert wird.