如何通过点击 div 切换密码可见性并同步切换眼睛图标

本文详解如何修复因 `img.src` 返回完整 url 导致的图标切换失效问题，使用 `getattribute(‘src’)` 精准比对原始路径，并提供健壮、可维护的密码显示控制方案。

在 Web 表单中，实现“密码可见性切换”（即点击眼睛图标切换输入框类型并同步更新图标）是常见需求。但许多开发者会遇到图标不切换的问题——表面看逻辑正确，实则根源在于对 dom 属性 src 的误解。

? 问题核心：img.src vs img.getAttribute(‘src’)

• element.src 返回解析后的绝对 URL（如 file:///C:/project/eye.png 或 https://example.com/eye.png），而非 html 中写的相对路径；
• 而 element.getAttribute(‘src’) 返回的是HTML 源码中声明的原始字符串（如 “eye.png” 或 “eyec.png”），这才是你期望比对的值。

因此，原代码中：

if (document.getElementById("eye").src == "eyec.png") { ... }

永远为 false —— 因为左侧是完整路径，右侧是相对名。

✅ 正确做法是统一使用 getAttribute(‘src’) 进行判断，并直接赋值 src 属性切换图像：

function fun1() {   const eyeImg = document.getElementById("eye");   const currentSrc = eyeImg.getAttribute("src");    if (currentSrc === "eyec.png") {     eyeImg.src = "eye.png";   } else if (currentSrc === "eye.png") {     eyeImg.src = "eyec.png";   } }

✅ 推荐优化写法（更简洁 & 容错更强）

function eye() {   const pwdInput = document.getElementById("password");   const eyeImg = document.getElementById("eye");    // 切换密码类型   pwdInput.type = pwdInput.type === "password" ? "text" : "password";    // 同步切换图标（基于原始 src 值判断）   const current = eyeImg.getAttribute("src");   eyeImg.src = current === "eye.png" ? "eyec.png" : "eye.png"; }

? 提示：将 pwdInput 和 eyeImg 缓存为变量，避免重复 DOM 查询；使用三元运算符提升可读性与性能。

⚠️ 注意事项

• 确保图片路径正确：eye.png 和 eyec.png 必须与 HTML 文件同级（或按实际路径调整），浏览器控制台 Network 标签可验证是否 404。
• 不要依赖初始 src 的绝对路径：即使页面加载时图标显示正常，src 属性值仍是绝对路径，务必用 getAttribute(‘src’) 获取原始值。
• 增强健壮性（可选）：可添加 else 分支处理异常路径，或用 includes() 判断后缀：

  if (current.includes("eye.png") && !current.includes("eyec.png")) {   eyeImg.src = "eyec.png"; } else {   eyeImg.src = "eye.png"; }

? 最终整合建议（HTML + js）

在

   @@##@@ 

document.getElementById("toggle-eye").addEventListener("click", eye);