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

Question

我有一个使用jQuery加载到Yahoo弹出窗口中的Ajax控件。我只是使用一个简单的.get请求来加载HTML。  $.get(contentUrl, null, function(response) {         $('#dialog').find('.bd').assertOne().html(response);     }, "waitDlg");现在的问题是，加载的内容需要自己的CSS，而CSS实际上是动态创建的。我可以选择内联或使用外部CSS样式表。在Chrome中进行的测试表明，使用上述代码将通过AJAX加载的css添加到DOM时未进行评估/应用。当Internet Explorer仅停留在DOM中时，它将评估内联的CSS，但Chrome不会。由于完全不相关的问题，我目前无法在FireFox中进行测试。jQuery是否有任何方法可以评估以内联或动态添加到DOM的样式表？我想这样做的原因有很多：弹出窗口中的css属于弹出窗口，并且可能完全来自不同的环境它是动态的，除非绝对必要，否则我不想将其放在父页面中我计划它像这样工作，但事实并非如此！:-(

Answer 1

给定样式表的路径（或一些将生成有效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");

Answer 2

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