我正在寻找一种<style>使用 JavaScript将标签插入 HTML 页面的方法。
迄今为止我发现的最好方法：
var divNode = document.createElement("div");
divNode.innerHTML = "<br><style>h1 { background: red; }</style>";
document.body.appendChild(divNode);
这适用于 Firefox、Opera 和 Internet Explorer，但不适用于 Google Chrome。<br>对于 IE 来说，前面的内容也有点难看。
有谁知道一种创建<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>标签的底部。
使用insertAdjacentHTML将样式标签注入文档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>这是一个脚本，它将 IE 样式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;');
我假设您想要插入一个style标签而不是一个link标签（引用外部 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 级浏览器
一个适用于所有浏览器的示例：
var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "style.css";
document.getElementsByTagName("head")[0].appendChild(ss);