如何通过点击 div 切换密码可见性并同步更新眼睛图标_网络技术

如何通过点击 div 切换密码可见性并同步更新眼睛图标

发布时间 - 2026-01-07 00:00:00 点击率：次

本文详解如何修复因 `img.src` 返回完整 url 导致的图标切换失效问题，通过 `getattribute('src')` 获取原始相对路径，并实现密码类型与图标状态的双向同步。

在 Web 表单中，常见的“密码可见性切换”功能通常包含两个联动行为：一是切换与，二是同步更新右侧眼睛图标的显示（如 eye.png ↔ eyec.png）。但许多开发者会遇到图标不切换的问题——表面逻辑正确，实际却无响应。根本原因在于：img.src 属性返回的是浏览器解析后的绝对 URL（如 file:///.../eye.png），而非 HTML 中写的相对路径 eye.png，因此直接用 === "eye.png" 比较必然失败。

✅ 正确做法是使用 element.getAttribute('src')，它精确读取 HTML 标签中声明的原始属性值：

function fun1() {
  const eyeImg = document.getElementById("eye");
  const currentSrc = eyeImg.getAttribute("src"); // ✅ 获取原始 src 值，如 "eye.png"

  if (currentSrc === "eyec.png") {
    eyeImg.src = "eye.png";
  } else if (currentSrc === "eye.png") {
    eyeImg.src = "eyec.png";
  }
}

同时，建议优化整体逻辑，避免冗余判断和潜在竞态。以下是重构后的健壮版本：

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 中直接调用该函数：

  @@##@@

⚠️ 注意事项：

确保 eye.png 和 eyec.png 文件确实存在于项目根目录（或对应路径），且文件名大小写完全匹配；
推荐为添加 alt 属性提升可访问性；
生产环境建议使用 CSS 类控制图标（如 .eye--open, .eye--closed），配合背景图或 SVG，更利于维护；
若启用 CSP（内容安全策略），动态修改 src 需确保资源路径符合 img-src 规则。

通过 getAttribute('src') 抓取原始属性值，再结合清晰的状态映射逻辑，即可稳定实现密码可见性与图标状态的精准同步。

# css # word # html # svg # 浏览器 # input # 重构 # 的是 # 见性 # 一是 # 并在 # 而非 # 表单 # 根本原因 # 却无 # 安全策略

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：windows电脑开机后只显示桌面背景

下一篇：windows7设置在哪里

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：windows电脑开机后只显示桌面背景

下一篇：windows7设置在哪里