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

我认为在文档的开头附加一个“link”标记是一种更好的做法。如果不可能,请尝试在头部附加“样式”标记。样式标记不应该在主体中(甚至不验证)。

附加链接标记:

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

直截了当的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"
});

最简单的方法(即使用jQuery)如下所示:

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

如果你这样做,那么它将在Safari中工作。如果您使用普通的jQuery方式(全部放在一个文本字符串中),它将失败(css不会加载)。

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

无聊的。我没有足够的分数来投票支持安德烈·西姆波卡的结果,但这是最好的解决方案。

要正确插入css文本,您必须:

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

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

请记住,在基于webkit的浏览器上,如果插入大量规则,这可能会很慢。webkit中存在修复此性能问题的漏洞( https://bugs.webkit.org/show_bug.cgi?id=36303 )。在此之前,您可以对批量插入使用样式标记。

http://www.quirksmode.org/dom/w3c_css.html

我知道这是一个老话题,但我认为有人会从中受益。我也需要将css动态加载到我的页面中(根据包含的“组件”模板,在所有内容呈现为onload之前):

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

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

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

我试着用一行方法将document.head添加到document.head中——在IE 10和Chrome中使用过,但在Safari中没有。上述方法在所有3种情况下都有效。