我正在寻找一种使用JavaScript将<style>标签插入HTML页面的方法。
目前我发现的最好的方式：
var divNode = document.createElement("div");
divNode.innerHTML = "<br><style>h1 { background: red; }</style>";
document.body.appendChild(divNode);
这在Firefox、Opera和Internet Explorer中工作，但在Google Chrome中不起作用。而且在IE中，前面的<br>有点丑。
是否有人知道创建一个<style>标签的方法：
更好看
与Chrome兼容？
或者可能：
这是我应该避免的非标准做法
三个可用的浏览器很棒，谁还使用Chrome呢？
style元素添加到head而不是body。这在IE（7-9），Firefox，Opera和Chrome中进行了测试。var css = 'h1 { background: red; }',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
head.appendChild(style);
style.type = 'text/css';
if (style.styleSheet){
// This is required for IE8 and below.
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
<style> 标签放在 <head> 元素内，每个添加的标签应该被添加到 <head> 标签底部。document.head.insertAdjacentHTML("beforeend", `<style>body{background:red}</style>`)$('<style>').text("body{background:red}").appendTo(document.head)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>const style = document.createElement("style")
style.textContent = "h1 { background-color: red; }"
document.head.appendChild(style)
上面的代码就是要点；如果您想了解原因，请继续阅读。
为什么需要另一个答案？已接受的答案过时了，其中包括针对像Internet Explorer这样的过时浏览器的冗余代码。其他答案过于复杂或使用了像.innerHTML这样的属性，这可能导致跨站脚本攻击。
type属性不是必需的大多数答案都会设置type属性，例如：style.type = "text/css"。除非您需要支持旧版浏览器，否则无需设置此属性。
根据<style>: The Style Information element - HTML | MDN，type属性是可选的，并默认为text/css：
type此属性将样式语言定义为MIME类型（不应指定字符集）。此属性是可选的，如果未指定，则默认为
text/css；除空字符串或text/css之外的值均不使用。注意：在现代Web文档中很少有理由包含此属性。
要添加CSS，请使用.textContent，因为它比其他方法更安全、更快。与.innerHTML相反，它不解析HTML，因此可以防止跨站脚本攻击。
另一个类似的属性.innerText类似于.textContent，但会考虑CSS样式，并仅表示“已呈现”的文本内容。由于我们不关心仅“已呈现”的内容，因此我们更喜欢.textContent。
.textContent有什么作用？设置.textContent属性会删除所有节点（元素）的子节点，并用给定的字符串值替换它们。
样式元素应该包含在头部: "样式元素 <style> 必须包含在文档的 <head> 中。...". [<style> ... | MDN]
要获取头部，请使用document.head，因为它已经被所有主流浏览器支持了很长时间，所以不需要其他备选方案。
我假设你想要插入一个 style 标签而不是一个链接到外部 CSS 的 link 标签，下面的示例就是这样做的：
<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级浏览器。
styleNode.styleSheet.cssText = ...。 - Christoph这是一段脚本，可以在没有IE-style createStyleSheet()和addRule()方法的浏览器中添加它们：
if(typeof document.createStyleSheet === 'undefined') {
document.createStyleSheet = (function() {
function createStyleSheet(href) {
if(typeof href !== 'undefined') {
var element = document.createElement('link');
element.type = 'text/css';
element.rel = 'stylesheet';
element.href = href;
}
else {
var element = document.createElement('style');
element.type = 'text/css';
}
document.getElementsByTagName('head')[0].appendChild(element);
var sheet = document.styleSheets[document.styleSheets.length - 1];
if(typeof sheet.addRule === 'undefined')
sheet.addRule = addRule;
if(typeof sheet.removeRule === 'undefined')
sheet.removeRule = sheet.deleteRule;
return sheet;
}
function addRule(selectorText, cssText, index) {
if(typeof index === 'undefined')
index = this.cssRules.length;
this.insertRule(selectorText + ' {' + cssText + '}', index);
}
return createStyleSheet;
})();
}
你可以通过以下方式添加外部文件
document.createStyleSheet('foo.css');
并通过动态方式创建规则
var sheet = document.createStyleSheet();
sheet.addRule('h1', 'background: red;');
一个适用于所有浏览器且可行的示例:
var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "style.css";
document.getElementsByTagName("head")[0].appendChild(ss);
style 没有 rel 或 href 属性 - 你是不是想用 link 元素？ - Christoph@vsync 中的 style 用于添加内联样式，而正确的样式表来源应该使用 link，这有避免浏览器兼容性问题的优势。 - majickdocument.head.innerHTML += `
<style>
h1 {
color: red;
}
p {
color: blue;
}
</style>`<h1>I'm red!</h1>
<p>I'm blue!</p>到目前为止，最简单的解决方案是使用反引号括起来，就像平常声明style标签一样。
通常需要覆盖现有规则，因此将新样式附加到HEAD中并不总是有效。
我想到了这个简单的函数，它总结了所有无效的“附加到BODY”的方法，并且更方便使用和调试（IE8+）。
window.injectCSS = (function(doc){
// wrapper for all injected styles and temp el to create them
var wrap = doc.createElement('div');
var temp = doc.createElement('div');
// rules like "a {color: red}" etc.
return function (cssRules) {
// append wrapper to the body on the first call
if (!wrap.id) {
wrap.id = 'injected-css';
wrap.style.display = 'none';
doc.body.appendChild(wrap);
}
// <br> for IE: http://goo.gl/vLY4x7
temp.innerHTML = '<br><style>'+ cssRules +'</style>';
wrap.appendChild( temp.children[1] );
};
})(document);
<style>标签注入到<head>标签之外。<style>标签应该只出现在<head>标签内部，这是广泛采用的HTML标准。对于内联样式，可以使用style属性，并且style属性可以应用于<body>标签内的任何标签，包括<body>标签本身。 - Spookyfunction setClassStyle(class_name, css) {
var style_sheet = document.createElement('style');
if (style_sheet) {
style_sheet.setAttribute('type', 'text/css');
var cstr = '.' + class_name + ' {' + css + '}';
var rules = document.createTextNode(cstr);
if(style_sheet.styleSheet){// IE
style_sheet.styleSheet.cssText = rules.nodeValue;
} else {
style_sheet.appendChild(rules);
}
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(style_sheet);
}
}
}
这个对象变量将在头标签中添加一个带有类型属性和一个简单的过渡规则的样式标签，该规则匹配每个单独的id/class/元素。随意修改content属性并注入尽可能多的规则。只需确保content内部的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();
document.head在所有主流浏览器中都得到支持。 - Rob Wdocument.querySelector("head")？根据来源，它也支持IE8。 - allenhwkimquerySelector()的引入；今天，我可能会选择自IE9起可用的document.head。 - Christophstyle.styleSheet.cssText之前，我必须将样式元素附加到头部。在附加之前，style.styleSheet为null。 - Will Hawker