如何应用通过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){&nbsp; &nbsp;$('<style type="text/css"></style>')&nbsp; &nbsp; &nbsp; .html(css)&nbsp; &nbsp; &nbsp; .appendTo("head");});&nbsp; &nbsp;使用动态创建的<link>加载$('<link rel="stylesheet" type="text/css" href="'+myStylesLocation+'" >')&nbsp; &nbsp;.appendTo("head");使用动态创建的<style>加载$('<style type="text/css"></style>')&nbsp; &nbsp; .html('@import url("' + myStylesLocation + '")')&nbsp; &nbsp; .appendTo("head");要么$('<style type="text/css">@import url("' + myStylesLocation + '")</style>')&nbsp; &nbsp; .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);