我目前在 Webkit（Safari 和 Chrome）中遇到问题，如果我尝试将一些 html 动态（innerHTML）加载到 div 中，html 包含 css 规则（...），在 html 被渲染后，样式定义不是加载（所以视觉上我可以告诉样式不存在，如果我用 javascript 搜索它们，也找不到样式）。 我尝试使用 jquery 插件 tocssRule()，它可以工作，但它太慢了。还有另一种让 webkit 动态加载样式的方法吗？ 谢谢。 帕特里克
【问题讨论】：
标签： css dynamic webkit loading
我认为将“链接”标签附加到文档头部是一种更好的做法。如果这不可能，请尝试将“样式”标签附加到头部。样式标签不应该在正文中（甚至不验证）。
附加链接标签：
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.type = 'text/css';
link.href = 'http://example.com/stylesheet.css';
document.head.appendChild(link);
附加样式标签：
var style = document.createElement('style');
style.innerHTML = 'body { background-color: #F00; }';
document.head.appendChild(style);
【讨论】：
innerHTML 未被弃用。
直接 jQuery 方式（适用于主流浏览器 - 包括 Chrome）：http://topsecretproject.finitestatemachine.com/2009/09/how-to-load-javascript-and-css-dynamically-with-jquery/
来自网站：
$("head").append("<link />");
var CSS = $("head").children(":last");
CSS.attr({
"rel": "stylesheet",
"type": "text/css",
"href": "url/to.css"
});
注意：该示例还包括 JS 的注入，如果您只想注入 CSS 引用，可以忽略。
【讨论】：
最简单的方法（即使用jQuery）如下：
var cssLink = $('<link />');
cssLink.attr("rel","stylesheet")
cssLink.attr("type", "text/css");
cssLink.attr("href","url/to.css");
如果你这样做，那么它将在 Safari 中工作。如果你用普通的 jQuery 方式（都在一个文本字符串中）它会失败（css 不会加载）。
然后你只需将它附加到头部 $('head').append(cssLink);
【讨论】：
感谢Vatos，你给了我一个很好的指导，基本上我按照你的建议做了，但使用jquery设置html并将新样式附加到头部，因为在执行innerHTML和document.head时safari/chrome会停止并且document.head未定义.我的代码看起来像这样
var cssDefinitions = '..my style chunk goes here';
var style = document.createElement('style');'
$(style).html(cssDefinitions);
$('head').append(style);【讨论】：
嗯。我没有足够的分数来支持 Andrei Cimpoca 的结果，但该解决方案是这里最好的解决方案。
style.innerHTML = "...";不适用于 webkit 引擎或 ie。
要正确注入 css 文本，您必须：
style.styleSheet.cssText = "...";即。
和
style.appendChild(document.createTextNode("..."));用于 webkit。
Firefox 也可以使用第二个选项，或者 style.innerHTML = "...";
【讨论】：
这是演出。帕特里克所说的对我不起作用。以下是我的做法。
var ref = document.createElement('style');
ref.setAttribute("rel", "stylesheet");
ref.setAttribute("type", "text/css");
document.getElementsByTagName("head")[0].appendChild(ref);
if(!!(window.attachEvent && !window.opera)) ref.styleSheet.cssText = asd;//this one's for ie
else ref.appendChild(document.createTextNode(asd));
InnerHTML 已被弃用，不应该用于这样的事情。而且速度也比较慢。
【讨论】：
除了上述基于样式标签的版本，您还可以直接使用javascript添加样式：
var style = document.getElementById('some-style-tag');
var sheet = style.sheet;
sheet.insertRule('.mydiv { background-color: ' + color + '; }', sheet.cssRules.length);
这样做的好处是能够使用变量而不必求助于 cssText/innerHTML。
请记住，在基于 webkit 的浏览器上，如果您要插入大量规则，这可能会很慢。在 webkit (https://bugs.webkit.org/show_bug.cgi?id=36303) 中存在一个修复此性能问题的错误。在此之前，您可以使用样式标签进行批量插入。
这是插入样式规则的 W3C 标准方式，但任何版本的 IE 都不支持：http://www.quirksmode.org/dom/w3c_css.html
【讨论】：
document.querySelector('#x').style.sheet 未定义。
我知道这是一个较老的话题，但认为有人会受益。我也需要将 css 动态加载到我的页面中（在加载所有内容之前，根据包含的“组件”模板）：
var oStyle = $("<style />");
oStyle.append("@import url(" + sTemplateCssUrl + ");");
oStyle.attr("type", "text/css");
$(document.head).append(oStyle);
我尝试使用单行方法附加到 document.head —— 在 IE 10 和 Chrome 中有效，但在 Safari 中无效。上述方法适用于所有 3。
【讨论】：