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' />");

在运行时加载样式表

4 个答案: