不写Js也能实现点击事件?说说你不知道的HTML之<Label>标签

简介: 不写Js也能实现点击事件?说说你不知道的HTML之<Label>标签

label 是h5的原生标签。它的官方定义是这样的


标签为 input 元素定义标注(标记)。


label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。


上面的意思呢,也就是说,label可以当作任意表单元素的标记元素。


因为它还有一个比较重要的特性,就是for属性。


标签的 for 属性应当与相关元素的 id 属性相同。


结合这句话,再加上官方的定义,你就会很明确的发现,label的for属性可以把label 绑定到另外一个元素。


而你需要做的就仅仅是把 这个标签的 ”for“ 属性的值设置为相关元素的id属性的值即可。


举例:

<input id="input_id"></input>
<label for="input_id"></label>

如上,我们就做了绑定,当我们点击label 这个标签的时候,其实变样的就等于我们点击了input.

有没有发现,这是许多人不曾注意的一项技能。

有了这个操作,我们可以增加许多类似的操作。且都比较简单,不用js。

如:

3080c396f77443589328ce1dec5b1229.png


页面如上,我们需要在点击”切换样式“按钮的时候,将下方的白框变成黑色,将边框线及里面内容变成白色。


无脑做法


一般来说,我们看到这个需求,就很无脑的先给 ”切换样式“ 这个按钮加个点击事件。然后剩下的大家都懂,无非就是获取样式,修改样式等。


那如何利用我们刚学的label 实现 无js代码的切换呢?


看下面。

首先,我们需要在页面上 如上所示,画出页面。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>测试页面</title>
  <style>
    .context .box{
        width: 300px;
        height: 300px;
        text-align: center;
        border: 1px solid black;
        background: white;
        color: black;
        margin-top: 10px;
    }
     .btn{
        padding: 2px 5px;
        border: 1px solid black;
        margin-bottom: 10px;
    }
  </style>
</head>
<body>
    <div class="context">
        <div  class="btn">
            切换样式
        </div>
        <div class="box">
            这是一段内容
        </div>
    </div>
</body>
<script>
</script>
</html>

其次,给body下 放置一个 checkbox

a7550b0f8a744b6e8ed5f7d4309d7db9.png

同时替换 class 为 btn 的标签为 label 。并设置它的 for 与 input的 id 的值一致。

b5ad5bf998ec4a38bb6c214a6c24acb5.png

其次我们需要列出 要更换的 内容的样式。


366af1badb04405f9686f854be73205f.png

这里的 #checkbox:checked + context .box


指的是 input的d:checked 意思是,input的 checkbox的选中情况。


后面的 .context .box 不用多介绍了吧,大多数人看的懂,指的是,当你选中上面checkbox后,去修改 class 为context 下的 class名为 box的样式。

6f11a9d0ebf440aebd20faaadb92a77a.png

也就是指的是这一步。

我们替换完成后,保存下代码去页面尝试。

8bef885ff12549f4b0793912712b2544.png

发现当我们勾选 checkbox 或者点击按钮的时候,都会出发样式变化。也就是说我们试验成功!

在最后我们将页面的 checkbox 在页面隐藏即可。


fe6a8e607396425ea747280a15646695.png


至此我们就无点击事件的情况下,完成了页面的样式切换。


最后来总结一下吧。label,好多人在日常开发中不经常用到,也经常不注意,说起切换样式或者获取焦点,第一反应大家都是先上个事件。通常往往忽略了html的一些”黑科技“。其实这些东西还挺好用的,至少让我们的代码更加的简洁不是吗。

目录
打赏
0
0
0
0
44
分享
相关文章
|
2月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
95 33
|
3月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
121 24
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
104 2
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
237 1
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
76 3
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
120 0
html5+three.js公路开车小游戏源码
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
54 1
JavaScript中的原型 保姆级文章一文搞懂
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
143 2
|
4月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
37 0
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
205 5