在运行时加载样式表

Question

我有一个特定的主题CSS，只有在弹出窗口启动时才需要使用，其他地方都没有使用该CSS。简单地在网站启动时加载是浪费的。

是否有一种方式只在需要时加载CSS，例如打开弹出窗口时可以加载样式表？

- Naruto

---

您可以从弹出窗口中显示的aspx页面的codebehind中加载它（参见this answer），或者（但不太干净）将CSS位放在aspx中的style标签内。 - Laurent S.

Answer 1

像这样创建一个新元素

var lnk=document.createElement('link');
lnk.href='path/sheet.css';
lnk.rel='stylesheet';
lnk.type='text/css';
(document.head||document.documentElement).appendChild(lnk);

希望这有所帮助。

- chandaniitr

---

嗨，Chandaniitr，感谢您的帮助，这里的“link”是什么意思？如果我有两个样式表，那么我需要重复相同的代码两次，并使用不同的参数，对吗？ - Naruto

这里，“link”是您想创建的元素类型。 该代码将添加<link href='path/sheet.css' rel=...>。 是的，您必须重复这个步骤2次。您可以将其包装在一个函数中，例如add_stylesheet('path/sheet.css')。您还可以尝试使用id进行操作，并更改href以在运行时更改样式表。希望这可以帮助到您。 - chandaniitr

Answer 2

你可能想尝试这种方法 如何使用Javascript加载CSS文件？（下面是代码）

但它确实会给网站增加大量的填充物，也许CSS占用的空间更小？

var $ = document; // shortcut
var cssId = 'myCss';  // you could encode the css path itself to generate id..
if (!$.getElementById(cssId))
{
    var head  = $.getElementsByTagName('head')[0];
    var link  = $.createElement('link');
    link.id   = cssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'http://website.com/css/stylesheet.css';
    link.media = 'all';
    head.appendChild(link);
}

- Alex

---

值得注意的是，$ 变量被许多流行的 JS 库（包括 jQuery）使用，因此如果您正在使用其中任何一个库，您可能需要尝试使用其他变量或仅使用 document 本身。 - Owen C. Jones

Alex，感谢你的回答。我需要把这段代码放在我的网站弹出窗口页面的JavaScript开头。 - Naruto

在这段代码中，变量cssId = 'myCss'的作用是为CSS路径生成一个唯一的ID。通过将CSS路径编码成ID，可以确保在页面上只有一个唯一的元素与该CSS路径相关联。这有助于避免可能出现的冲突或错误，并提高代码的可维护性。 - Naruto

如果您希望ID保证唯一且/或可记忆，您可以使用路径本身作为ID，例如将ID设置为website_com_css_stylesheet_css或类似的内容。我认为这就是他的意思。但您不需要这样做 :-) - Alex

Answer 3

在您的代码后端中添加以下内容，使用GetWebResourceUrl：

HtmlLink css= new HtmlLink();
css.Href = Page.ClientScript.GetWebResourceUrl(this.GetType(), "yourstyle.css");
css.Attributes["type"] = "text/css";
css.Attributes["rel"] = "stylesheet";
Page.Header.Controls.Add(css);

或者

Literal cssFile = new Literal() 
          {Text = @"<link href=""" + page.ResolveUrl("~yourstyle.css") + @"""  
            type=""text/css"" rel=""stylesheet"" />" };
page.Header.Controls.Add(cssFile);

- Murali Murugesan

---

嗨，Murali，谢谢你的帮助。我想知道你的style.css是仅仅是CSS文件名还是需要提供相对路径？ - Naruto

@LLL，GetWebResourceUrl()函数将会查找提供的文件名对应的URL。 - Murali Murugesan

Answer 4

你可以用 jQuery 的方式来实现这个： $('head').append("<link rel='stylesheet' href='/href' type='text/css' anythingelse='value' />");

- Luke Madhanga