如何通过点击 div 切换密码输入框类型及图标图片

本文详解 javascript 中通过点击元素切换密码输入框类型（text/password）和对应图标的实现方法，重点解决因 `src` 属性返回绝对路径导致的图片切换失效问题，并提供健壮、可复用的代码方案。

在 Web 表单开发中，「密码可见性切换」（即点击眼睛图标切换密码明文/密文显示）是常见交互需求。但初学者常遇到：点击后图标不切换、输入框类型无响应——其核心原因在于对 DOM 属性获取方式的理解偏差。

关键问题在于：element.src 返回的是解析后的绝对 URL（如 file:///C:/project/eye.png），而非 HTML 中写的相对路径 eye.png；而 element.getAttribute('src') 才能准确读取原始 HTML 属性值。若直接用 == "eye.png" 比较 src，几乎永远为 false，导致条件判断失效。

以下是优化后的完整解决方案：

function togglePasswordVisibility() {
  const passwordInput = document.getElementById("password");
  const eyeIcon = document.getElementById("eye");

  // 切换输入框类型
  if (passwordInput.type === "text") {
    passwordInput.type = "password";
  } else {
    passwordInput.type = "text";
  }

  // 切换图标（使用 getAttribute 获取原始 src 值）
  const currentSrc = eyeIcon.getAttribute("src");
  if (currentSrc === "eye.png") {
    eyeIcon.src = "eyec.png";
  } else if (currentSrc === "eyec.png") {
    eyeIcon.src = "eye.png";
  }
}

HTML 中只需绑定该函数即可（推荐使用语义化结构）：

  Password:

  
  
    @@##@@
  

✅ 最佳实践建议：

• 使用 === 严格比较，避免隐式类型转换风险；
• 将两个逻辑合并为单一函数（如 togglePasswordVisibility），提升可读性与可维护性；
• 为 添加 alt 属性，增强无障碍访问支持；
• 若项目已引入现代浏览器环境，可进一步用 classList.toggle() 管理图标状态（配合 CSS Sprite 或 SVG），但本例以兼容性优先。

⚠️ 注意事项：

• 确保 eye.png 和 eyec.png 文件路径正确，且与 HTML 同级或按相对路径配置；
• 不要在 中提前执行脚本，确保 DOM 加载完成后再绑定事件（推荐将
• 避免重复 ID；当前结构中
  是错误闭合标签，应改为 。

通过修正属性读取方式并统一逻辑入口，即可稳定实现「一次点击显示明文+切换图标，再次点击恢复密文+切回原图」的预期效果。