不写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的一些”黑科技“。其实这些东西还挺好用的,至少让我们的代码更加的简洁不是吗。

目录
相关文章
|
4月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
4月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
4月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
4月前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习
|
4月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
4月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
4月前
|
前端开发
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示
html+css实战40-label标签
html+css实战40-label标签
137 0
html+css实战40-label标签
|
JSON 前端开发 JavaScript
小记录 单选框的注意点 html中字符串拼接 el-upload手动上传 表格跳转 v-for动态添加背景色 控制label标签于文本框之间的间距
小记录 单选框的注意点 html中字符串拼接 el-upload手动上传 表格跳转 v-for动态添加背景色 控制label标签于文本框之间的间距
HTML &lt;label&gt; 标签
定义和用法 标签为 input 元素定义标注(标记)。 label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。
971 0

热门文章

最新文章