如果用户使用带有锚/哈希的链接访问网站，我如何将样式应用于元素

How can I apply a style to element if the user came to website using a link with an anchor/hash

本文关键字：网站 元素 应用于 样式 访问 链接 用户 哈希 如果      更新时间：2023-09-26

假设我在互联网的某个地方放了一个到我网站的链接。具体来说，它是一个带有锚/哈希链接到文章一部分的URL，例如:http://example.com/article/#subsection。

现在，如果有人通过这个链接来到我的网站，我如何触发CSS/JS做一些动作?

在我的特殊情况下，当有人使用包含#subsection的链接时，我想为<div>添加id为subsection的样式。

任何想法?

对于IE9和更高版本，这完全可以通过:target伪类实现:

#subsection:target {
    …
}

如果你想做的是突出显示页面上与当前URL中的哈希值匹配的部分(从你的问题中的措辞来看并不完全清楚)，并且你想支持广泛的旧浏览器，那么你可以这样做:

哈希值没有发送到服务器，因此您必须在客户端javascript中应用更改。您可以通过在页面加载时向对象添加与哈希名称匹配的类来实现:

<script>
var id = window.location.hash.slice(1);
if (id) {
    var obj = document.getElementById(id);
    if (obj) {
        obj.className += " specialStyle";
    }
}
</script>

或者，使用jQuery:

<script>
if (window.location.hash.length > 1) {
    $(window.location.hash).addClass("specialStyle");
}
</script>

这些脚本必须位于您希望添加类的元素之后的任何位置，或者在使用$(document).ready()之类的东西加载DOM之前防止执行，尽管脚本可以运行得越快，新样式就会显示得越快。

我不清楚评论中提到的XSS漏洞现在在jQuery中是否仍然存在问题，但您可以使用纯javascript版本(不包含此漏洞)或在jQuery版本中进一步保护，如以下所示:

<script>
if (window.location.hash.length > 1) {
    $(window.location.hash.replace(/[<>]/g, "")).addClass("specialStyle");
}
</script>
相关文章：