本文详解如何修复因 `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）
在 <div onclick="eye()" class="eye-btn"> 中保持简洁，JS 部分建议封装为模块化函数，并在页面加载后绑定事件（而非内联 onclick），例如：
<div class="eye-btn" id="toggle-eye"> <img src="eye.png" id="eye" alt="Toggle password visibility"> </div>
document.getElementById("toggle-eye").addEventListener("click", eye);这样既解耦逻辑，又便于后续添加过渡动画、无障碍支持（如 aria-label）等进阶功能。
掌握 getAttribute() 与属性访问器的区别，是 DOM 操作中少踩坑的关键一步。一次修正，全局生效。
