在 CSS 中模擬 Onclick 事件

1. 在 CSS 中使用 Checkbox Hack 模擬 Onclick 事件
2. 在 CSS 中使用 :target 偽類模擬 Onclick 事件
3. 在 CSS 中使用 :focus 偽類和 tabindex 屬性模擬 Onclick 事件

本文介紹了在 CSS 中模擬 onclick 事件的方法。

在 CSS 中使用 Checkbox Hack 模擬 Onclick 事件

我們無法在 CSS 中實現準確的 JavaScript onclick 事件。但是，我們可以使用 CSS 技巧來模擬 onclick 事件。這個技巧背後的核心概念是使用核取方塊和標籤標籤。我們可以為核取方塊中的 id 屬性和 label 中的 for 屬性使用相同的值來附加它們。單擊標籤將選中和取消選中核取方塊。因此，我們可以使用 :checked 選擇器在單擊時選中核取方塊。我們將使用相鄰的兄弟選擇器 + 來選擇 label 內的 img 標籤和核取方塊。因此，當核取方塊被選中時，我們可以選擇影象並更改其尺寸。因此，我們可以使用 CSS 來實現 onclick 功能。

例如，從 <input> 標籤建立一個核取方塊。將核取方塊的 id 設定為 btn。在它下面，寫一個 <label> 標籤並寫下與 for 屬性值相同的值 btn。在 label 標籤內，插入影象。接下來，在 CSS 中，使用 CSS 選擇器選擇 id btn，並將 display 設定為 none。隨後，在 btn id 上使用 :checked 選擇器作為 #btn:checked。使用 + 運算子選擇 label 標籤內的 img 標籤。選擇後，將高度和寬度設定為 75px。

在這裡，當我們單擊影象時，影象的大小會減小。最初，影象是 100px 大小。因此，我們使用 CSS 實現了點選功能。

示例程式碼：

<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;
}

在 CSS 中使用 :target 偽類模擬 Onclick 事件

我們可以使用 :target 偽類來模擬僅使用 CSS 的 onlick 事件。偽類有助於在 CSS 中設定活動元素的樣式。在這個方法中，核心概念是改變元素的 display 屬性。當元素處於非活動狀態時，我們可以將顯示設定為 none，並在使用 :target 偽類選擇元素時將其更改為 block。我們可以使用 :target 偽類設定 id 與 URL 片段匹配的元素的樣式。

例如，使用 URL #day 編寫一個 anchor 標籤。寫下今天是幾號？標籤內。在它下面，建立一個 id 為 day 的 div 元素。在 div 中寫入文字 Sunday。在 CSS 中，使用 id 選擇器選擇 id day，並將 display 屬性設定為 none。接下來，選擇與 :target 偽類相同的 id，並將 display 屬性設定為 block。

在下面的示例中，當我們單擊今天是哪一天？文字時，將出現星期日。我們使用:target 類將隱藏元素的顯示更改為可見。這樣，我們就可以在 CSS 中模擬 onclick 事件。

示例程式碼：

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

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

在 CSS 中使用 :focus 偽類和 tabindex 屬性模擬 Onclick 事件

我們可以使用 img 標籤中的 tabindex 屬性和 :focus 偽類來模擬 CSS 中的 onclick 事件。例如，插入帶有 img 標籤的影象，id 為 pic，tabindex 值為 0。在 CSS 中，使用 :focus 偽類選擇 pic id。然後，將影象的高度和寬度更改為 75px。影象的初始大小為 100px。在這裡，當我們單擊影象時，影象的大小將更改為 75px。因此，我們可以僅使用 CSS 來實現 onclick 事件。

示例程式碼：

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

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