在一组url中存在的元素上应用css

apply css on elements which are present in a set of urls

本文关键字：存在 元素 css 应用 url 一组      更新时间：2023-09-26

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

我想将某种风格应用于一个元素，但只有当我的网站中访问了特定的url时。

我使用的是asp.net，所以一个aspx页面模板可以满足大量url的需求，所以我不能在模板的html中编写样式。

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

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

我也可以使用asp.net literal control，并根据代码后面的url加载css，但添加新的url将涉及代码更改。而且听起来很乱。

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

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

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

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

我希望我能正确地解释。

如果需要澄清，请告诉我。

它最初可能会显示，因为它在加载页面之前至少会被渲染一段时间，所以它会显示，直到页面加载时调用jQuery ready()函数。

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

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

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

  1. 将some-class添加到元素中
  2. 在一个新的.css文件中定义该类
  3. 只在需要样式的页面上导入新的.css文件应用于

URL不是DOM的一部分，因此CSS没有要选择的元素。

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

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

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

或者，如果您需要添加大量css，您也可以包含或替换完整的文件，如：

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

我希望它能有所帮助！

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

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

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

请确保您的jq-lib导入成功。

相关文章：