如何应用内联和/或外部CSS动态加载jQuery [英] How to apply inline and/or external CSS loaded dynamically with jQuery
问题描述
我有一个Ajax控件,使用jQuery加载到Yahoo弹出框中。
I have an Ajax control that is loaded into a Yahoo popup using jQuery.
我只是使用一个简单的.get请求来加载HTML。
I just use a simple .get request to load the HTML.
$.get(contentUrl, null, function(response) {
$('#dialog').find('.bd').assertOne().html(response);
}, "waitDlg");
现在的问题是,加载的内容需要自己的CSS,实际上是动态创建的。我可以选择内联或使用外部CSS样式表。
Now the problem is that the content that is loaded needs its own CSS which is actually dynamically created. I have a choice of either inlining the or using an external CSS stylesheet.
在Chrome中测试显示,通过AJAX加载的CSS不是在评估/应用时使用上述代码添加到DOM。
Testing in Chrome shows that the css loaded via AJAX is not evaluated/applied at the time it is added to the DOM using the above code.
Internet Explorer将评估一个内嵌的CSS,当它只是停留在DOM,但Chrome不会。我目前无法在FireFox中测试,因为一个完全不相关的问题。
Internet explorer WILL evaluate an inlined css when it just gets stuck in the DOM but Chrome will not. I am currently unable to test in FireFox because of a completely unrelated issue.
在jQuery中有任何方法来评估动态添加到DOM的样式表inline或?
Is there any way in jQuery to evaluate a stylesheet that was dynamically added to the DOM as either an inline or ?
有很多原因我想这样做:
There are many reasons I'd like to do this :
- 弹出框中的CSS属于弹出框,可能来自不同的环境
- 它是动态的,我不想把它放在父页面,除非我绝对有
- 我计划它像这样工作,它不会! : - (
推荐答案
em> URL将生成有效的CSS):
Given a path to your stylesheet (or some URL that will generate valid CSS):
var myStylesLocation = "myStyles.css";
...其中之一应该工作:
...either one of these should work:
$.get(myStylesLocation, function(css)
{
$('<style type="text/css"></style>')
.html(css)
.appendTo("head");
});
使用动态创建的< link>加载
Load using dynamically-created <link>
$('<link rel="stylesheet" type="text/css" href="'+myStylesLocation+'" >')
.appendTo("head");
使用动态创建的< style>加载
Load using dynamically-created <style>
$('<style type="text/css"></style>')
.html('@import url("' + myStylesLocation + '")')
.appendTo("head");
或
$('<style type="text/css">@import url("' + myStylesLocation + '")</style>')
.appendTo("head");
这篇关于如何应用内联和/或外部CSS动态加载jQuery的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!