本文详解 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 中只需绑定该函数即可（推荐使用语义化结构）：
<label class="label" for="password">
Password:<br>
<input type="password" id="password" class="password" placeholder="input password..." name="password"/>
<div class="eye-btn" onclick="togglePasswordVisibility()">
@@##@@
</div>
</label>✅ 最佳实践建议：
- 使用 === 严格比较，避免隐式类型转换风险；
- 将两个逻辑合并为单一函数（如 togglePasswordVisibility），提升可读性与可维护性；
- 为
添加 alt 属性，增强无障碍访问支持； - 若项目已引入现代浏览器环境，可进一步用 classList.toggle() 管理图标状态（配合 CSS Sprite 或 SVG），但本例以兼容性优先。
⚠️ 注意事项：
- 确保 eye.png 和 eyec.png 文件路径正确，且与 HTML 同级或按相对路径配置；
- 不要在 中提前执行脚本，确保 DOM 加载完成后再绑定事件（推荐将 <script> 放在 前，或使用 DOMContentLoaded 监听）； </script>
- 避免重复 ID；当前结构中
是错误闭合标签，应改为 。
通过修正属性读取方式并统一逻辑入口，即可稳定实现「一次点击显示明文+切换图标，再次点击恢复密文+切回原图」的预期效果。
