这是浏览器强制实施的隐私保护机制,非bug;调用getcomputedstyle(el).color时始终返回未访问状态的颜色值,以防止通过样式侧信道探测用户浏览历史。

getComputedStyle(el).color 返回默认色是浏览器强制行为
这不是 bug,也不是你漏写了 a:link 或写错了选择器——现代 Chrome、Firefox、Safari 在调用 getComputedStyle() 查询 :visited 元素时,**一律返回与 :link 状态一致的 color 值**,哪怕你明确定义了 a:visited { color: #666; }。这是隐私保护机制的硬性拦截,JS 无法绕过。
为什么浏览器要这么做
如果允许脚本读取真实 :visited 样式,网站就能构造大量已知 URL 的链接,再通过测量每个链接的 getComputedStyle(el).color 是否变化,反推出用户是否访问过这些页面——这等于在泄露浏览历史。2010 年代中期起,所有主流浏览器都封死了这条路。
- 所有探测尝试(包括
el.matches(':visited')、window.getComputedStyle(el, ':visited'))均返回false或默认值 - 即使你在 DevTools 中手动切换元素状态为
:visited,控制台执行getComputedStyle仍不反映真实渲染色 - 本地
file://协议下该限制可能更严格,甚至完全不触发:visited状态
a:visited 样式明明生效了,为什么 JS 拿不到
渲染引擎和样式计算引擎被隔离了:CSS 引擎知道该用什么颜色画出来,但 JS 调用 getComputedStyle 时,浏览器会主动“脱敏”,把真实值替换成安全兜底值(通常是 a:link 定义的颜色或 UA 默认色)。
- 你看到链接变灰了 → 渲染层生效了 ✅
- 但
getComputedStyle(link).color返回"rgb(0, 102, 204)"→ 计算层被拦截 ✅ - 试图用
el.style.color读取?它本来就是空字符串,因为没设内联样式
想记录访问状态,只能靠自己存
别再尝试用 JS 探测 :visited,它从设计上就不支持。真要实现自定义反馈(比如加图标、改背景、标徽章),必须换思路:
- 给链接绑定
click事件,在跳转前把el.href存进localStorage - 页面加载后遍历所有
a[href],匹配localStorage里的 URL,给对应元素加class="visited-js" - 用 CSS 控制
.visited-js的任意样式:.visited-js { background: #f8f9fa; padding-left: 20px; } - 注意处理相对路径、协议/端口差异、URL 编码等边界情况,否则匹配会失败
最易被忽略的是::visited 只对真实完成导航的链接生效(不是点击就触发,而是跳转并加载完目标页),而 JS 方案可以立刻响应点击动作——这个时间差,决定了你得在 beforeunload 或 click 阶段存状态,不能等到 pageshow 才去查。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











