如何使用jQuery动态加载内联和/或外部CSS样式？

Question

如何使用jQuery动态加载内联和/或外部CSS样式？

43

我有一个Ajax控件，使用jQuery加载到Yahoo弹出窗口中。

我只是使用简单的.get请求来加载HTML。

  $.get(contentUrl, null, function(response) {
         $('#dialog').find('.bd').assertOne().html(response);
     }, "waitDlg");

现在的问题是加载的内容需要自己的CSS，实际上是动态创建的。我可以选择内联或使用外部CSS样式表。在Chrome中进行测试显示通过AJAX加载的CSS在添加到DOM时不会被评估/应用。Internet Explorer会在它被卡在DOM中时评估内联CSS，但Chrome不会。由于一个完全无关的问题，我目前无法在FireFox中进行测试。在jQuery中有没有一种方法可以评估作为inline或external动态添加到DOM中的样式表？我想这样做有很多原因：弹出窗口中的CSS属于弹出窗口，可能来自完全不同的环境；它是动态的，除非绝对必要，否则我不想将它放在父页面中；我计划它像这样工作，但它没有！ :-(

- Simon_Weaver

3个回答

27

被接受的答案在IE 7中无法工作（在IE 8中有缺陷）。以下内容可以在IE、Firefox、Chrome/Safari中正常工作：

var url = 'urlOfStyleSheet.css'
if(document.createStyleSheet) {
    try { document.createStyleSheet(url); } catch (e) { }
}
else {
    var css;
    css         = document.createElement('link');
    css.rel     = 'stylesheet';
    css.type    = 'text/css';
    css.media   = "all";
    css.href    = url;
    document.getElementsByTagName("head")[0].appendChild(css);
}

- user406905

1

谢谢！现在如果我能记得我在哪里使用了它，那我就可以去更改它了。 - Simon_Weaver

这在IE8中可以工作，但在IE7中不行。接受的答案在两者中都不起作用。 - orourkedd

这适用于IE 8的document.createStyleSheet是有效的，而且其他技术在IE 8上似乎非常不稳定。它们可以工作，但页面越大/加载越慢，它似乎就停止工作了。document.createStyleSheet对我来说一直很好用。 - Toskan

1

var cssPath = "/path/to/css/";

var linkStr = document.createElement("&lt;link rel='stylesheet' type='text/css' href='"+cssPath+"' media='screen' /&gt;");

document.getElementsByTagName("head")[0].appendChild(linkStr);

- Toby

抱歉，本意是要在Cris Rus的问题下添加评论。 - Toby

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shog9 · Accepted Answer

给定你样式表的路径（或者某个可以生成有效CSS的URL）：

var myStylesLocation = "myStyles.css";

这两个都应该可以使用：

使用AJAX加载

$.get(myStylesLocation, function(css)
{
   $('<style type="text/css"></style>')
      .html(css)
      .appendTo("head");
});

使用动态创建的<link>标签进行加载

$('<link rel="stylesheet" type="text/css" href="'+myStylesLocation+'" >')
   .appendTo("head");

使用动态创建的<style>标签加载

$('<style type="text/css"></style>')
    .html('@import url("' + myStylesLocation + '")')
    .appendTo("head");

或者

$('<style type="text/css">@import url("' + myStylesLocation + '")</style>')
    .appendTo("head");