我正在寻找一种方法，将一个<style>标签插入到一个HTML页面与JavaScript。
目前为止我发现的最好的方法是:
var divNode = document.createElement("div");
divNode.innerHTML = "<br><style>h1 { background: red; }</style>";
document.body.appendChild(divNode);
这适用于Firefox, Opera和Internet Explorer，但不适用于谷歌Chrome。而且，对于IE来说，前面的<br>有点难看。
有人知道如何创建<style>标签吗
是更好的 工作与Chrome?
或者
这是我应该避免的不规范的事情 三个可用的浏览器都很棒，谁会用Chrome呢?
当前回答
一切都好，除了styleNode。要在IE6中使用javascipt创建的节点工作，您需要在设置cssText之前将节点附加到文档中;
更多信息@ http://msdn.microsoft.com/en-us/library/ms533698%28VS.85%29.aspx
其他回答
document.head.innerHTML += ' <时尚> h1 { 颜色:红色; ｝ p { 颜色:蓝色; ｝ > < /风格的 <标题>我是红色的!< / h1 > < p >我是蓝色!< / p >
到目前为止最直接的解决方案。您所要做的就是像通常声明样式标签一样，在反勾号之间输入
你写的:
var divNode = document.createElement("div");
divNode.innerHTML = "<br><style>h1 { background: red; }</style>";
document.body.appendChild(divNode);
为什么不是这个?
var styleNode = document.createElement("style");
document.head.appendChild(styleNode);
从此以后，你可以很容易地将CSS规则添加到HTML代码中:
styleNode.innerHTML = "h1 { background: red; }\n";
styleNode.innerHTML += "h2 { background: green; }\n";
.．.或者直接到DOM:
styleNode.sheet.insertRule("h1 { background: red; }");
styleNode.sheet.insertRule("h2 { background: green; }");
我希望这在任何地方都能工作，除了老式浏览器。
2019年肯定能在Chrome上运行。
这个对象变量将把style标签附加到带有type属性的head标签上，其中有一个简单的转换规则，匹配每个id/class/元素。您可以随意修改内容属性，并根据需要注入尽可能多的规则。只要确保内容中的css规则保持在一行(或“转义”每个新行，如果你喜欢这样)。
var script = {
type: 'text/css', style: document.createElement('style'),
content: "* { transition: all 220ms cubic-bezier(0.390, 0.575, 0.565, 1.000); }",
append: function() {
this.style.type = this.type;
this.style.appendChild(document.createTextNode(this.content));
document.head.appendChild(this.style);
}}; script.append();
this link may helpful to you:
http://jonraasch.com/blog/javascript-style-node
我假设你想要插入一个样式标签而不是一个链接标签(引用外部CSS)，所以这就是下面的例子所做的:
<html>
<head>
<title>Example Page</title>
</head>
<body>
<span>
This is styled dynamically via JavaScript.
</span>
</body>
<script type="text/javascript">
var styleNode = document.createElement('style');
styleNode.type = "text/css";
// browser detection (based on prototype.js)
if(!!(window.attachEvent && !window.opera)) {
styleNode.styleSheet.cssText = 'span { color: rgb(255, 0, 0); }';
} else {
var styleText = document.createTextNode('span { color: rgb(255, 0, 0); } ');
styleNode.appendChild(styleText);
}
document.getElementsByTagName('head')[0].appendChild(styleNode);
</script>
</html>
另外，我注意到在你的问题中，你正在使用innerHTML。这实际上是一种将数据插入页面的非标准方式。最佳实践是创建一个文本节点并将其附加到另一个元素节点。
关于你的最后一个问题，你会听到有人说你的工作应该在所有浏览器上都能工作。这完全取决于你的受众。如果你的听众中没有人在使用Chrome，那么不要担心;然而，如果你想要获得尽可能多的用户，那么最好支持所有主要的a级浏览器
