如何应用使用 jQuery 动态加载的内联和/或外部 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/805384/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to apply inline and/or external CSS loaded dynamically with jQuery
提问by Simon_Weaver
I have an Ajax control that is loaded into a Yahoo popup using jQuery.
我有一个 Ajax 控件，它使用 jQuery 加载到 Yahoo 弹出窗口中。
I just use a simple .get request to load the HTML.
我只是使用一个简单的 .get 请求来加载 HTML。
$.get(contentUrl, null, function(response) {
$('#dialog').find('.bd').assertOne().html(response);
}, "waitDlg");
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.
现在的问题是加载的内容需要自己的 CSS，它实际上是动态创建的。我可以选择内联或使用外部 CSS 样式表。
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.
Chrome 中的测试表明，通过 AJAX 加载的 css 在使用上述代码添加到 DOM 时并未评估/应用。
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.
当内联 css 卡在 DOM 中时，Internet Explorer 将对其进行评估，但 Chrome 不会。由于完全不相关的问题，我目前无法在 FireFox 中进行测试。
Is there any way in jQuery to evaluate a stylesheet that was dynamically added to the DOM as either an inline or ?
jQuery 中是否有任何方法来评估动态添加到 DOM 的样式表作为内联或 ?
There are many reasons I'd like to do this :
我想这样做的原因有很多：
- the css in the popup belongs to the popup and may be coming from a different environment altogether
- it is dynamic and i dont want to put it in the parent page unless i absolutely have to
- i planned for it to work like this and it doesnt! :-(
- 弹出窗口中的 css 属于弹出窗口，可能完全来自不同的环境
- 它是动态的，除非我绝对必须，否则我不想将它放在父页面中
- 我计划让它像这样工作，但它没有！:-(
回答by Shog9
Given a path to your stylesheet (or someURL that will generate valid CSS):
给定样式表的路径（或将生成有效 CSS 的某个URL）：
var myStylesLocation = "myStyles.css";
...either one of these should work:
...其中之一应该有效：
Load using AJAX
使用 AJAX 加载
$.get(myStylesLocation, function(css)
{
$('<style type="text/css"></style>')
.html(css)
.appendTo("head");
});
Load using dynamically-created <link>
使用动态创建的 <link> 加载
$('<link rel="stylesheet" type="text/css" href="'+myStylesLocation+'" >')
.appendTo("head");
Load using dynamically-created <style>
使用动态创建的 <style> 加载
$('<style type="text/css"></style>')
.html('@import url("' + myStylesLocation + '")')
.appendTo("head");
or
或者
$('<style type="text/css">@import url("' + myStylesLocation + '")</style>')
.appendTo("head");
回答by user406905
The accepted answer will not work in IE 7 (and buggy in IE 8). the following will work in IE as well as FF and chrome/safari:
接受的答案在 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);
}
回答by user406905
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);
