在运行时加载样式表

Posted 2023-03-06

【中文标题】在运行时加载样式表

【英文标题】：Load stylesheet at runtime

【发布时间】：2013-10-25 18:52:04

【问题描述】：

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

有没有办法只在需要时加载 css，即在打开弹出窗口时我可以加载样式表？

【问题讨论】：

您可以从弹出窗口中显示的 aspx 页面的代码隐藏中加载它（cfr this answer），或者（但它不太干净）将一些 CSS 放入您的 aspx 中的 styletags .

【参考方案1】：

您可能想尝试这种方法How to load up CSS files using javascript?（下面的代码）

但它确实为网站添加了大量的填充物，也许 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);

【讨论】：

还值得注意的是，许多流行的 JS 库（包括 jQuery）都使用了 $ 变量，因此如果您使用其中任何一个，您可能想尝试不同的/仅使用文档本身。

Alex 感谢您的回答，我需要将此代码放在我的网站弹出页面 javascript 的开头

var cssId = 'myCss'; // 你可以对 css 路径本身进行编码以生成 id.. 这行可以，你能解释一下吗

如果您希望 ID 保证唯一和/或可以被记住，您可以将路径用作 ID 本身，例如将 ID 设置为 website_com_css_stylesheet_css 或类似名称。我想这就是他的意思。但你不需要这样做:-)

【参考方案2】：

使用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，感谢您的帮助。我想知道 yourstyle.css 只是 css 文件名还是我需要提供相对路径？

@LLL，GetWebResourceUrl() 将找到所提供文件名的 url

【参考方案3】：

像这样创建一个新元素

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

希望这会有所帮助。

【讨论】：

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

这里，“链接”是您要创建的元素类型。代码将添加 。而且，是的，您必须重复此操作 2 次。您可以将其包装在一个函数中，例如 add_stylesheet('path/sheet.css')。您还可以使用 id 和更改 href，以在运行时更改样式表。希望这会有所帮助。

【参考方案4】：

你可以用 jQuery 的方式做到这一点：

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