Question

我目前在Webkit（Safari和Chrome）中遇到问题我尝试将一些html动态加载（innerHTML）到一个div中，html包含css规则（...），在html被渲染后样式定义不是加载（所以在视觉上我可以告诉样式不存在，如果我用javascript搜索它们没有找到样式）。我尝试过使用jquery插件tocssRule（），它可以工作，但它太慢了。有没有其他方法让webkit动态加载样式？谢谢。帕特里克

Answer 1

我认为将“链接”标记附加到文档头部是一种更好的做法。如果无法做到这一点，请尝试在头部附加“样式”标签。样式标签不应该在体内（甚至不验证）。

附加链接标记：

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);

Answer 2

直接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引用，可以忽略它。

Answer 3

最简单的方法（使用jQuery）如下：

var cssLink = $('<link />');
cssLink.attr("rel","stylesheet")
cssLink.attr("type", "text/css");
cssLink.attr("href","url/to.css");

如果您这样做，那么它将在Safari中运行。如果你使用正常的jQuery方式（所有在一个文本字符串中）它将失败（css将不加载）。

然后你只需用$（'head'）将它附加到头部。附加（cssLink）;

Answer 4

感谢Vatos，你给了我一个很好的领导，基本上我做了你的建议，但是使用jquery来设置html并将新样式添加到头部，因为，当执行innerHTML和document.head未定义时，safari / chrome会停止。我的代码看起来像这样

var cssDefinitions = '..my style chunk goes here';
var style = document.createElement('style');'
$(style).html(cssDefinitions);
$('head').append(style);

Answer 5

这是演出。帕特里克所说的并不适合我。我就是这样做的。

    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，不应将其用于此类事情。此外，它也较慢。

Answer 6

MEH。我没有足够的积分来评价Andrei Cimpoca的结果，但这个解决方案是最好的解决方案。

style.innerHTML =“...”;在webkit引擎中不起作用，或者。

要正确注入css文本，您必须：

style.styleSheet.cssText =“...”;对于ie。

和

style.appendChild（document.createTextNode（ “...”））;对于webkit。

Firefox也可以使用第二个选项，或使用style.innerHTML =“...”;

Answer 7

除了上面基于样式标记的版本，您还可以直接使用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

Answer 8

我知道这是一个较老的主题，但认为有人会受益。我也需要动态地将css加载到我的页面中（在所有渲染onload之前，根据包含的“组件”模板）：

var oStyle = $("<style />");

oStyle.append("@import url(" + sTemplateCssUrl + ");");
oStyle.attr("type", "text/css");

$(document.head).append(oStyle);

我尝试使用单行方法附加到document.head - 在IE 10和Chrome中工作，但在Safari中没有。上述方法适用于所有3种方法。

如何在Webkit（Safari / Chrome）中动态加载css规则？

8 个答案: