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

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').append(cssLink);

Answer 4

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

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

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

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

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

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

和

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 动态加载到我的页面中（根据包含的“组件”模板，在加载所有内容之前）：

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

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

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

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