前端练手小项目「CSS&&JavaScript」「03」

目录

效果图

遇到的盲点

源码

---

效果图

实现了调色，调整清晰度，改变颜色的功能

 

 

遇到的盲点

 1.<label>一般与<input>共用

优点：

• 标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。 这意味着，当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让使用辅助技术的用户更容易理解应输入什么数据。
• 你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让包括使用触屏设备在内的用户更容易激活这个元素。

将一个 <label> 和一个 <input> 元素匹配在一起，你需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和  <input> 的 id 一样。

for

即和 <label> 元素在同一文档中的 可关联标签的元素 的 id。 文档中第一个 id 值与 <label> 元素 for 属性值相同的元素，如果可关联标签（labelable），则为已关联标签的控件，其标签就是这个 <label> 元素。如果这个元素不可关联标签，则 for 属