javascript - 将 css 应用于一组 url 中存在的元素

Question

我相信如果没有 javascript/jquery，以下内容是不可能的，但仍然想确认一下，因为我不擅长 css/html/jquery。

我想将特定样式应用于元素，但仅当在我的网站中访问特定 url 时。

我使用的是 asp.net，因此单个 aspx 页面模板可以满足大量 url 的要求，因此我无法在模板的 html 中编写样式。

如果我在 css 文件中编写此样式并将其包含在模板中，它将应用于所有 url。

我可以通过 jquery 选择性地加载这个 css 文件，但我不想尽可能地让 jquery 参与其中。

我还可以使用 asp.net 文字控件 并根据来自代码隐藏的 url 加载 css，但随后添加新 url 将涉及代码更改。而且听起来很乱。

目前我正在通过 javascript/jquery 应用它，如下所示 document.ready

if (window.location.href.toLowerCase().indexOf("/some-url/") > 0)
{
    $('#some-element-id').attr('style', 'display:none');
}

但这显示元素在消失前的一瞬间。

涉及 jquery/javascript 但解决上述问题的解决方案也会有所帮助。

我希望我能够正确解释它。

如果需要任何说明，请告诉我。

Answer 1

它可能首先显示，因为它至少在页面加载之前渲染了一点，所以它会一直显示到页面加载时调用 jQuery ready() 函数为止。

我认为最简单的解决方法是默认隐藏元素，然后在 URL 中 时显示它:

#some-element-id{
    display:none;
}
if (window.location.href.toLowerCase().indexOf("/some-url/") < 0)
{
    $('#some-element-id').attr('style', 'display:block');
}