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

Question

我目前在Webkit(Safari和Chrome)中遇到问题我尝试动态加载(innerHTML)一些html到一个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);