图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { position: relative; } input { width: 300px; margin: 300px 0 0 300px; padding-bottom: 10px; padding-left: 10px; outline: none; border: none; border-bottom: 1px solid rgb(163, 160, 160); } img { position: absolute; width: 30px; height: 30px; margin-top: 295px; margin-left: -30px; cursor: pointer; } </style> </head> <body> <div> <input id="input1" type="password" onclick="fun(this)" placeholder="请输入密码:"> <img id='img1' src="images/隐藏.png" alt=""> </div> <script> var img1 = document.querySelector('img') img1.onclick = function () { // 事件发生时要执行的代码 var inp = document.getElementById('input1') if (inp.type == 'password') { inp.type = 'text' img1.src = "images/显示.png" } else { inp.type = 'password'; img1.src = "images/隐藏.png" } } </script> </body> </html>