我有一个没有 href 的 anchor 链接标签，它正确显示没有样式。我根据输入到文本输入中的文本以编程方式添加 href。
在 Safari/Firefox 中，一旦在文本输入中输入内容(这正是我想要的)，链接就会带有下划线并改变颜色。
但是在 Chrome 中，链接样式没有改变(但是添加了 href 并且可以点击)。如果我单击链接，则会应用该样式。
有人知道为什么会这样吗？
我认为这是因为 chrome 在单击链接之前无法识别 any-link 伪类现在匹配(因为链接具有 href)，但我不知道为什么会这样会是这种情况 - 也许与回流或重绘有关？
代码:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
<script>
function loadLink(field) {
document.getElementById('the-link').href = "https://www.google.com?q=" + field.value;
}
</script>
</head>
<body>
<input type="text" onkeyup="loadLink(this)">
<a id="the-link">The link</a>
</body>
</html>
最佳答案
您可以通过将比例设置为 1 来强制重绘:
<script>
function loadLink(field) {
var newHref = "https://www.google.com?q=" + field.value;
var link = document.getElementById('the-link');
link.href = newHref;
link.style.webkitTransform = 'scale(1)';
}
</script>
<input type="text" onkeyup="loadLink(this)">
<a id="the-link">The link</a>
关于javascript - 以编程方式添加 href 时，Chrome anchor 下划线丢失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28221520/