如何应用使用jQuery动态加载的内联和/或外部CSS

Question

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

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

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

现在问题是加载的内容需要自己的CSS，实际上是动态创建的。我可以选择内联或使用外部CSS样式表。

在Chrome中进行测试表明，使用上述代码在添加到DOM时，不会评估/应用通过AJAX加载的CSS。

Internet Explorer会评估内联css，因为它只会陷入DOM，但Chrome不会。由于一个完全不相关的问题，我目前无法在FireFox中进行测试。

jQuery中是否有任何方法可以评估动态添加到DOM的样式表作为内联或？

我有很多理由要这样做：

• 弹出窗口中的css属于弹出窗口，可能来自不同的环境
• 它是动态的，我不想把它放在父页面中，除非我绝对必须
• 我计划让它像这样工作，它不会！ ： - （

Answer 1

给定样式表的路径（或某些 URL将生成有效的CSS）：

var myStylesLocation = "myStyles.css";

......其中一个应该有效：

使用AJAX加载

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

使用动态创建的＆lt; link＆gt;

加载

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

使用动态创建的＆lt; style＆gt;

加载

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

或

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

Answer 2

接受的答案在IE 7中不起作用（和IE 8中的错误）。以下内容适用于IE以及FF和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);
}

Answer 3

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

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

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