案例--密码可视化

body代码

    密码: <input type="text">
    <button id="btn">这是一个眼睛图标</button>
    

1. 监听 btn 是否被点击

语法:

    元素.onclick = function () {}

2. 点击的时候, 判断 input 的 type 属性

   如果 type === password  ->      重新赋值为 text
   如果 type === text      ->      重新赋值为 password

0. 获取标签

    var btn = document.querySelector('#btn')
    var inp = document.querySelector('input')

1. 监听 btn 是否被点击

    btn.onclick = function () {}

2. 点击的时候, 判断 input 的 type 属性

第一种

        if (inp.getAttribute('type') === 'password') {
            // 赋值为 text
             inp.setAttribute('type', 'text')
         } else if (inp.getAttribute('type') === 'text') {
             // 赋值为 password
             inp.setAttribute('type', 'password')
         }
       

第二种

        // console.dir(inp.type)
        if (inp.type === 'password') {
            // 赋值为 text
            inp.type = 'text'
        } else if (inp.type === 'text') {
            // 赋值为 password
            inp.type = 'password'
        }