html - 在运行时加载样式表

Question

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

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

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

希望这可以帮助。

Answer 2

您可能想尝试这种方法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);
}

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

Answer 4

您可以使用 jQuery 方式执行此操作：

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