我正在寻找一种方法，将一个<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呢?
当前回答
如果您面临的问题是将一串CSS注入到页面中，那么使用<link>元素比<style>元素更容易做到这一点。
下面添加p {color:绿色;}规则到页面。
<link rel="stylesheet" type="text/css" href="data:text/css;charset=UTF-8,p%20%7B%20color%3A%20green%3B%20%7D" />
您可以在JavaScript中通过URL编码您的CSS字符串并将其添加到HREF属性来创建它。比<style>元素或直接访问样式表要简单得多。
let linkElement: HTMLLinkElement = this.document.createElement('link');
linkElement.setAttribute('rel', 'stylesheet');
linkElement.setAttribute('type', 'text/css');
linkElement.setAttribute('href', 'data:text/css;charset=UTF-8,' + encodeURIComponent(myStringOfstyles));
这将在IE 5.5以上工作
其他回答
任何正在寻找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的评论。
this link may helpful to you:
http://jonraasch.com/blog/javascript-style-node
最琐碎的答案:
function addStyle (styleText) {
const styleNode = document.createElement('style');
styleNode.type = 'text/css';
styleNode.textContent = styleText;
document.documentElement.appendChild(styleNode);
return styleNode;
}
下面是动态添加类的一个变体
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);
}
}
}
一切都好，除了styleNode。要在IE6中使用javascipt创建的节点工作，您需要在设置cssText之前将节点附加到文档中;
更多信息@ http://msdn.microsoft.com/en-us/library/ms533698%28VS.85%29.aspx
