我正在寻找一种方法，将一个<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呢?
当前回答
下面是动态添加类的一个变体
function 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);
}
}
}
其他回答
<style>标签应该放在<head>元素中，每个添加的标签都应该添加到<head>标签的底部。
使用insertAdjacentHTML注入一个样式标签到文档头标签:
本机DOM:
document.head。insertAdjacentHTML(“beforeend”、“身体{背景:红}<时尚> < / >风格”)
jQuery:
美元(“< >”)风格。文本(车身{背景:红的appendTo(文件。头) <剧本剧本src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < / >
通常情况下，需要重写现有的规则，因此向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);
演示:codepen, jsfiddle
我假设你想要插入一个样式标签而不是一个链接标签(引用外部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级浏览器
最琐碎的答案:
function addStyle (styleText) {
const styleNode = document.createElement('style');
styleNode.type = 'text/css';
styleNode.textContent = styleText;
document.documentElement.appendChild(styleNode);
return styleNode;
}
据我所知，有4种方法。
var style= document.createElement("style");
(document.head || document.documentElement).appendChild(style);
var rule=':visited { color: rgb(233, 106, 106) !important;}';
//no 1
style.innerHTML = rule;
//no 2
style.appendChild(document.createTextNode(rule));
//no 3 limited with one group
style.sheet.insertRule(rule);
//no 4 limited too
document.styleSheets[0].insertRule('strong { color: red; }');
//addon
style.sheet.cssRules //list all style
stylesheet.deleteRule(0) //delete first rule
