如何通过点击 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）

在

中保持简洁，JS 部分建议封装为模块化函数，并在页面加载后绑定事件（而非内联 onclick），例如：

  @@##@@

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

这样既解耦逻辑，又便于后续添加过渡动画、无障碍支持（如 aria-label）等进阶功能。

掌握 getAttribute() 与属性访问器的区别，是 DOM 操作中少踩坑的关键一步。一次修正，全局生效。