在 CSS 中模擬 Onclick 事件

Sushant Poudel 2023年2月20日 2021年10月2日
  1. 在 CSS 中使用 Checkbox Hack 模擬 Onclick 事件
  2. 在 CSS 中使用 :target 偽類模擬 Onclick 事件
  3. 在 CSS 中使用 :focus 偽類和 tabindex 屬性模擬 Onclick 事件
在 CSS 中模擬 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 為 daydiv 元素。在 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 為 pictabindex 值為 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
 }
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn