使用getComputedStyle读取被覆盖的CSS变量失效问题

核心原因 #

浏览器出于隐私保护，对:visited伪类的可访问性做了严格限制：只有有限的视觉属性（如color、background-color、border-color等）能被JS通过getComputedStyle获取到变化值，自定义CSS变量不在允许范围内。这是为了防止脚本通过读取样式来探测用户的浏览历史。

解决方案：利用可检测的视觉属性判断访问状态 #

既然自定义变量无法生效，我们可以直接通过检测链接的color属性变化来判断是否被访问过，这是浏览器允许的操作。

修改后的完整代码 #

HTML

<h1>Search</h1>
<div class="text">Link 1: <a id="link1" href="https://www.scouting.org">scouting.com</a>
  <div id="tt" class="tooltip">Not visited</div> troop.</div>

CSS

a {
  color: #0000ff; /* 明确初始蓝色 */
}

#link1:visited {
  color: #800080; /* 访问后变为紫色 */
}

.tooltip {
  position: absolute;
  display: none;
  background-color: wheat;
  border-radius: 10px;
  padding: 20px;
  border: 3px solid black;
  left: 0;
  top: 0;
}

a:hover ~ .tooltip {
  display: block;
}

JavaScript

const link = document.getElementById("link1");
const tooltip = document.getElementById("tt");
const initialColor = getComputedStyle(link).color;

window.addEventListener('mousemove', (event) => {
  // 更新提示框位置
  tooltip.style.left = `${event.clientX + 10}px`;
  tooltip.style.top = `${event.clientY + 10}px`;

  // 获取当前链接的计算颜色
  const currentColor = getComputedStyle(link).color;

  // 对比颜色判断是否访问过
  if (currentColor !== initialColor) {
    tooltip.textContent = "Visited";
  } else {
    tooltip.textContent = "Not visited";
  }
});

额外说明 #

• 必须使用具体的颜色值（如十六进制、RGB），避免使用blue、purple这类关键字，因为不同浏览器对关键字的解析可能略有差异，导致对比失效。
• 除了color，也可以使用border-color、background-color等其他允许的属性，但color是最直观且不会影响页面布局的选择。

内容的提问来源于stack exchange，提问作者Slothscript