在 CSS 中模拟 Onclick 事件

Sushant Poudel 2023年2月20日
  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
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