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

StackOverflow https://stackoverflow.com/questions/351633

  •  20-08-2019
  •  | 
  •  

题

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

有帮助吗？

解决方案

我认为这是一个更好的做法是一个“链接”标签附加到文档的头部。如果这是不可能的，尝试将“风格”标签附加到头部。样式标记不应该在所述主体（甚至不验证）。

附加链接标记：

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

笔记：该示例还包括 JS 的注入，如果您只想注入 CSS 引用，则可以忽略该注入。

最简单的方式（使用jQuery即是）如下：

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

如果你那样做，那么它会在Safari工作。如果你这样做的正常jQuery的方式（全部在一个文本字符串），它会失败（的CSS将不加载）。

然后，你只是它附加到头部用$（ '头'）附加（cssLink）;

感谢Vatos，你给我带了好头，基本上我做了你的建议，但使用jQuery来设置html和新样式附加到头部，因为Safari /铬会做的innerHTML和document.head是不确定的，当熄火。我的代码收盘看起来像这样

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

MEH。我没有足够的积分投票了安德烈Cimpoca的结果，但这种解决方案是这里最好的一个。

style.innerHTML = “...”;在webkit的发动机或即不能正常工作。

要正确地注入CSS文本，必须：

style.styleSheet.cssText = “...”;为即

和

style.appendChild（document.createTextNode（ “...”））;为webkit的。

火狐也将与第二个选项，或者与工作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);

这样做的优点是能够使用变量而不必求助于 cssText/innerHTML。

请记住，在基于 webkit 的浏览器上，如果您插入大量规则，速度可能会很慢。webkit 中存在一个用于修复此性能问题的错误（https://bugs.webkit.org/show_bug.cgi?id=36303）。在此之前，您可以使用样式标签进行批量插入。

这是插入样式规则的 W3C 标准方式，但任何版本的 IE 都不支持： 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 - 在IE 10和铬的工作，但不在Safari。该方法在所有3个以上的工作。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top