这是我参与「第五届青训营」伴学笔记创作活动的第 3 天

写好JS的原则

各司其职

看一下以下两个代码

第一个图片中的代码用JS来控制样式就显得很不可靠，你要去猜用JS控制之后可能变成了并不是你原本的样式。

所以应该像第二张图一样用JS来控制行为，比如添加一个类:

1、addClass（'active'），激活某个CSS类；

2、addClass（'deactive'），不激活某个CSS类；

3、addClass（'disable'），不激活某个CSS类。

等等添加删除class的操作。

但是上面的JS代码还是对样式进行了控制，其实我们应该用纯CSS来实现。

通过checkbox来实现样式的变化

for 属性规定 label 与哪个表单元素绑定。

将表单控件作为标记标签的内容

<label>Date of Birth: <input type="text" name="DofB" /></label>

为label标签下的 for 属性命名一个目标表单 id，上面使用的就是显式联系

<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />

组件是指页面上抽出来一个个包含模板(HTML)、功能(JS)和样式(CSS)的单元。