Jak symulować wydarzenie OnClick w CSS

Jak symulować wydarzenie OnClick w CSS

Kliknij element wyzwala zdarzenie OnClick. To wydarzenie może potwierdzić formularz, dostarczyć wiadomości ostrzegawcze i więcej. Pole wyboru w CSS to najlepszy sposób na symulację zdarzeń OnClick. W tym artykule pokazuje, w jaki sposób możesz symulować zdarzenie OnClick za pomocą CSS.

Jak symulować wydarzenie OnClick w CSS?

Do symulacji Technika wyboru zdarzenia onClick jest używana. Zanim najpierw pójdziemy do przodu, dowiadujemy się, czym jest pole wyboru.

Co to jest pole wyboru w CSS?

Pole wyboru to technika, która może kontrolować wygląd niektórych elementów, takich jak przełączanie widoczności zakładek, menu rozwijanych i wielu innych.

Składnia

Poniżej podano składnię pola wyboru:


: Służy do przyjmowania danych wejściowych od użytkownika.

ID: Jest to nazwa przypisanej klasy.

Przejdźmy do praktycznego przykładu, w którym zastosujemy wydarzenie OnClick na obrazie.

Przykład: Jak symulować wydarzenie OnClick?

Tutaj będziemy:

    • Utwórz pole wyboru za pomocą znacznika i przypisz identyfikator „na kliknięcie„Do tego.
    • Napisz tag, tak samo jak identyfikator. Oba powinny być takie same.
    • Włóż obraz za pomocą znacznika:


Następnie przejdź do CSS i napisz następujący kod:

#Onclick: Checked + etykieta> IMG
szerokość: 100px;
Wysokość: 75px;


W wyżej wymieniony kod wdrożyliśmy:

    • A ":sprawdzony„Selektor w klasie o nazwie„na kliknięcie".
    • Wybraliśmy obraz wewnątrz etykiety za pomocą operatora +.
    • W następnym kroku przypisaliśmy wysokość i szerokość obrazu.

Da nam następujące dane wyjściowe:


Wyjście zweryfikowało, że zdarzenie onClick zostało pomyślnie zastosowane do obrazu.

Wniosek

W CSS możemy symulować zdarzenie OnClick za pomocą pola wyboru. Aby to zrobić, dodaj pole wyboru za pomocą znacznika i przypisz „ID„Do tego. Następnie utwórz tag i przypisz go wartość taka sama jak „ID". W pliku CSS dodaj „:sprawdzony”Selektor w klasie docelowej i wybierz obraz wewnątrz etykiety za pomocą operatora +. W tym artykule wyjaśniono, jak symulować zdarzenie OnClick za pomocą CSS, wraz z jego przykładami.