不写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。

如：

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

无脑做法

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

那如何利用我们刚学的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