我正在寻找一种方法，将一个<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呢?
当前回答
通常情况下，需要重写现有的规则，因此向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
其他回答
这个对象变量将把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();
下面是动态添加类的一个变体
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);
}
}
}
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上运行。
任何正在寻找Typescript版本的人，
const addStyles = (styles) => {
let styleNode : HTMLStyleElement = document.createElement('style');
styleNode.type = 'text/css';
if (styleNode.style)
styleNode.style.cssText = styles;
else
styleNode.appendChild(document.createTextNode(styles));
/* Append style to the head element */
document.head.appendChild(styleNode);
}
此外，在react/vue/angular中，如果需要直接注入CSS，可以使用posstcss-js将CSS转换为JSS，并使用CSS-in-JSS直接注入一个新的样式表。欲了解更多信息，请参考本文档。
更新
你可以用document。以及@Brandon McConnell的评论。
