如何应用jQuerydynamic加载的内联和/或外部CSS

我有一个使用jQuery加载到雅虎popup窗口的Ajax控件。

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

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

现在的问题是，加载的内容需要自己的CSS，这实际上是dynamic创build的。 我可以select内联或使用外部CSS样式表。

在Chrome中进行testing显示，通过AJAX加载的CSS在使用上面的代码添加到DOM时不会被评估/应用。

Internet Explorer将评估一个内嵌的CSS时，它只是困在DOM中，但Chrome不会。 我目前无法在FireFox中进行testing，因为完全不相关的问题。

有什么办法在jQuery来评估一个样式表，dynamic地添加到DOM作为内联或？

我想要这么做的原因有很多：

• popup窗口中的CSS属于popup窗口，可能完全来自不同的环境
• 这是dynamic的，我不想把它放在父页面，除非我绝对必须
• 我打算这样工作，它不是！ 🙁

Answer 1

给你的样式表（或一些将生成有效CSS的URL）的path：

 var myStylesLocation = "myStyles.css"; 

…其中任何一个应该工作：

使用AJAX加载

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

使用dynamic创build的<link>加载

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

使用dynamic创build的<style>加载

 $('<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和铬/ 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);