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

Question

我目前在 Webkit（Safari 和 Chrome）中遇到问题，我尝试动态加载（innerHTML）一些 html 到 div 中，该 html 包含 css 规则（...），在渲染 html 后，未加载样式定义（因此从视觉上我可以看出样式不存在，而且如果我用 javascript 搜索它们也找不到样式）。 我尝试过使用 jquery 插件 tocssRule()，它可以工作，但速度太慢了。 还有另一种方法让 webkit 动态加载样式吗？ 谢谢。 帕特里克

Answer 1

我认为最好的做法是将“链接”标签附加到文档的头部。 如果不可能，请尝试在头部附加一个“style”标签。 样式标签不应该出现在正文中（甚至不验证）。

附加链接标签：

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').append(cssLink); 将其附加到头部即可

Answer 4

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

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

Answer 5

嗯。 我没有足够的积分来投票支持 Andrei Cimpoca 的结果，但该解决方案是这里最好的解决方案。

style.innerHTML = "..."; 不适用于 webkit 引擎或 ie。

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

style.styleSheet.cssText = "..."; 对于即。

和

style.appendChild(document.createTextNode("...")); 对于网络工具包。

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

Answer 6

这是演出。 帕特里克所说的对我不起作用。 我是这样做的。

    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 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 中存在一个用于修复此性能问题的 bug (https://bugs.webkit .org/show_bug.cgi?id=36303）。 在此之前，您可以使用样式标签进行批量插入。

这是插入样式规则的 W3C 标准方式，但任何版本的 IE 都不支持： http://www.quirksmode.org/dom/w3c_css.html

Answer 8

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

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

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

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

我尝试使用单行方法附加到 document.head - 在 IE 10 和 Chrome 中工作，但在 IE 10 和 Chrome 中工作，但在苹果浏览器。 上述方法在所有 3 种情况下均有效。