;
在 【Web APIs】JavaScript 操作元素 ② ( 修改元素属性 | 直接访问属性 | 使用setAttribute、getAttribute 和 removeAttribute访问属性...操作 修改表单元素属性 ;
一、案例需求
实现一个密码输入框 , 点击右侧按钮可以显示密码 , 再次点击就隐藏密码显示 ;
二、关键要点
1、密码表单标签结构
密码表单 , 就是将 input 表单标签设置...浮动 , 定位 两种方式 , 这里使用 绝对定位 设置该 img 标签位置 ;
将图片放置在 布局右侧 , 距离顶部 和 右侧 各 2 像素 , 如果将 图片大小设置为 24x24 像素 , 则底部距离图片也有..., 如果当前值为 0 说明是 密码状态 , 此时 密码是隐藏的 , 如果当前值为 1 说明是 文本状态 , 此时 密码是显示的 ;
最后 , 设置 DOM 元素的 点击事件 , 根据 flag 值 设置...,表示密码现在是显示状态
flag = 1;
} else {
// 如果密码是显示状态 , 点击按钮隐藏密码