将css应用于一组网址中存在的元素

Question

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

我想将某种样式应用于元素，但仅当在我的网站中访问特定的URL时才可以。

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

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

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

我还可以使用asp.net literal control并根据后台代码中的URL加载CSS，但是添加新的URL将涉及代码更改。 听起来也很混乱。

目前，我正在通过document.ready / ready上的javascript / jquery进行以下操作

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');
}

Answer 2

如果#some-element-id在单独的页面上，则

1. 给你的元素添加some-class
2. 在新的.css文件中定义该类
3. 仅在您要应用样式的页面上导入该新的.css文件

Answer 3

该URL不是DOM一部分，因此CSS无需选择任何元素。

正如您所说，可以在特定URL应用CSS的唯一方法是使用javascript。

我可以告诉您的建议是使用addClass代替

.attr('style', 'display:none');

或者，如果您需要添加许多CSS，则还可以包括或替换完整的文件，例如：

$('head').append('<link rel="stylesheet" href="youStilefile.css" type="text/css" />');

希望对您有所帮助！

Answer 4

最好的解决方案是通过服务器（独立于客户端）生成的代码分隔css样式。

您也可以测试以下代码，而不是$('#some-element-id').attr('style', 'display:block');

$('#some-element-id').hide();

并请确保您的jq库成功导入。