Das Onclick-Ereignis in CSS simulieren

1. Verwenden Sie den Checkbox-Hack, um ein Onclick-Ereignis in CSS zu simulieren
2. Verwenden Sie die Pseudo-Klasse :target, um ein Onclick-Ereignis in CSS zu simulieren
3. Verwenden Sie die Pseudo-Klasse :focus und das Attribut tabindex, um das Onclick-Ereignis in CSS zu simulieren

In diesem Artikel werden Methoden zum Simulieren von Onclick-Ereignissen in CSS vorgestellt.

Verwenden Sie den Checkbox-Hack, um ein Onclick-Ereignis in CSS zu simulieren

Wir können nicht das genaue JavaScript-onclick-Ereignis in CSS erreichen. Wir können jedoch einen CSS-Trick verwenden, um ein onclick-Ereignis zu simulieren. Das Kernkonzept dieses Tricks ist die Verwendung einer Checkbox und des label-Tags. Wir können sie mit dem gleichen Wert für das Attribut id in der Checkbox und das Attribut for in label anhängen. Wenn Sie auf das Etikett klicken, wird das Kontrollkästchen aktiviert und deaktiviert. So können wir den Selektor :checked verwenden, um die Checkbox auszuwählen, wenn sie angeklickt wird. Wir verwenden den nebenstehenden Geschwisterselektor +, um das img-Tag innerhalb des labels zusammen mit dem Kontrollkästchen auszuwählen. Wenn das Kontrollkästchen aktiviert ist, können wir das Bild auswählen und seine Abmessungen ändern. Daher können wir die Onclick-Funktion mit CSS erreichen.

Erstellen Sie beispielsweise ein Kontrollkästchen aus dem Tag <input>. Setzen Sie die id der Checkbox auf btn. Schreiben Sie darunter ein <label>-Tag und den gleichen Wert btn wie den Wert des for-Attributs. Fügen Sie innerhalb des Label-Tags ein Bild ein. Als nächstes wählen Sie in CSS mit dem CSS-Selektor die ID btn und stellen Sie display auf none. Verwenden Sie anschließend den Selektor :checked auf der btn-ID als #btn:checked. Wählen Sie mit dem Operator + das img-Tag innerhalb des label-Tags aus. Stellen Sie nach der Auswahl die Höhe und Breite auf 75px ein.

Wenn wir hier auf das Bild klicken, verringert sich die Größe des Bildes. Das Bild hat zunächst eine Größe von 100px. So haben wir die Onclick-Funktionalität mit CSS erreicht.

Beispielcode:

<input type="checkbox" id="btn"/>
<label for="btn">
    <img src="/img/DelftStack/logo.png" />
</label>

#btn{
    display: none;
}
#btn:checked + label > img {
    width: 75px;
    height: 75px;
}

Verwenden Sie die Pseudo-Klasse :target, um ein Onclick-Ereignis in CSS zu simulieren

Wir können die Pseudoklasse :target verwenden, um das onlick-Ereignis nur mit CSS zu simulieren. Die Pseudoklasse hilft beim Stylen des aktiven Elements in CSS. Bei dieser Methode besteht das Kernkonzept darin, die Eigenschaft display der Elemente zu ändern. Wenn das Element inaktiv ist, können wir die Anzeige auf none setzen und auf block ändern, wenn das Element mit der Pseudoklasse :target ausgewählt wird. Wir können das Element, dessen id mit dem Fragment der URL übereinstimmt, mit der Pseudoklasse :target stylen.

Schreiben Sie beispielsweise ein anchor-Tag mit der URL #day. Schreiben Sie den Text What day is today? innerhalb des Etiketts. Darunter machen Sie ein div-Element mit der ID day. Schreiben Sie den Text Sunday in das div. Wählen Sie in CSS mit dem ID-Selektor die id day aus und setzen Sie die Eigenschaft display auf none. Wählen Sie als nächstes dieselbe id mit der Pseudoklasse :target und setzen Sie die Eigenschaft display auf block.

Im Beispiel unten, wenn wir auf den Text What day is today? klicken, erscheint Sunday. Wir haben die Klasse :target verwendet, um die Anzeige des versteckten Elements auf sichtbar zu ändern. Auf diese Weise können wir Onclick-Ereignisse in CSS simulieren.

Beispielcode:

<a href="#day">What day is today?</a>
<div id="day">Sunday</div>

#day {
    display: none;
}
#day:target {
    display: block;
}

Verwenden Sie die Pseudo-Klasse :focus und das Attribut tabindex, um das Onclick-Ereignis in CSS zu simulieren

Wir können das tabindex-Attribut im img-Tag und die :focus-Pseudoklasse verwenden, um onclick-Ereignisse in CSS zu simulieren. Fügen Sie beispielsweise ein Bild mit dem Tag img mit der ID als pic und dem Wert tabindex als 0 ein. Wählen Sie in CSS die ID pic mit der Pseudoklasse :focus aus. Ändern Sie dann die Höhe und Breite des Bildes auf 75px. Die Ausgangsgröße des Bildes war 100px. Wenn wir hier auf das Bild klicken, ändert das Bild seine Größe auf 75px. Daher können wir das onclick-Ereignis nur mit CSS erreichen.

Beispielcode:

 <img id="pic" tabindex="0" src="/img/DelftStack/logo.png" />

#pic:focus{
    width: 75px;
    height: 75px
 }