17370845950

切换密码可见性并同步更新眼睛图标 " />

本文详解 javascript 中因 `img.src` 返回绝对路径导致图片切换失效的问题，提供使用 `getattribute('src')` 获取原始相对路径的正确方案，并附带健壮性优化与完整可运行示例。

在 Web 表单中，实现“密码可见/隐藏”功能时，常需同步切换输入框类型（type="password" ↔ type="text"）和眼睛图标（如 eye.png ↔ eyec.png）。但初学者常遇到图标不切换的问题——表面看逻辑正确，实则源于对 DOM 属性 src 的误解。

元素的 .src 属性返回的是浏览器解析后的完整绝对 URL（例如 file:///C:/project/eye.png 或 https://example.com/eye.png），而非 HTML 中写的相对路径 eye.png。因此，直接用 == "eye.png" 比较必然失败。

✅ 正确做法是使用 element.getAttribute('src')，它精准返回 HTML 标签中声明的原始字符串值：

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";
  }
}

⚠️ 更进一步，建议增强代码鲁棒性：

• 使用严格相等 === 替代 ==；
• 添加默认 fallback，避免因初始路径异常导致逻辑中断；
• 合并两个函数逻辑，提升可维护性。

优化后的完整函数如下：

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

  // 切换输入框类型
  if (passwordInput.type === "password") {
    passwordInput.type = "text";
    eyeImg.src = "eyec.png"; // 显示明文时显示“睁眼”图标
  } else {
    passwordInput.type = "password";
    eyeImg.src = "eye.png"; // 隐藏时显示“闭眼”图标
  }
}

对应 HTML 中只需绑定一次事件：

  Password:

  
  
    @@##@@
  

? 注意事项：

• 确保 eye.png 和 eyec.png 文件存在于与 HTML 同级目录，或按实际路径调整；
• 若使用构建工具（如 Webpack/Vite），静态资源路径可能需通过 public/ 或 assets/ 引用，此时应统一使用 import 或环境变量处理；
• 推荐为眼睛图标添加 cursor: pointer CSS 样式，提升用户可感知性；
• 生产环境中建议增加 aria-label 和 role="button"，保障无障碍访问。

该方案简洁、可靠，彻底规避了路径解析差异带来的陷阱，是前端表单交互中的典型最佳实践。