我正在寻找一种方法，将一个<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呢?
当前回答
试着把风格元素添加到头部而不是身体。
在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注入一个样式标签到文档头标签:
本机DOM:
document.head。insertAdjacentHTML(“beforeend”、“身体{背景:红}<时尚> < / >风格”)
jQuery:
美元(“< >”)风格。文本(车身{背景:红的appendTo(文件。头) <剧本剧本src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < / >
据我所知，有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
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元素- HTML | MDN, type属性是可选的，默认为text/css:
类型 此属性将样式语言定义为MIME类型(不应指定字符集)。此属性是可选的，如果没有指定，默认为text/css;不使用空字符串或text/css以外的值。注意:在现代web文档中几乎没有理由包含这个属性。
添加CSS
要添加CSS，请使用. textcontent，因为它比其他方法更安全、更快。与. innerhtml相反，它不解析HTML，因此可以防止跨站点脚本攻击。
另一个类似的属性，. innertext，类似于. textcontent，但考虑了CSS样式，只表示“呈现”的文本内容。由于我们对“渲染”的内容不感兴趣，我们更喜欢. textcontent。
设置.textContent做什么?
设置. textcontent属性将删除所有节点(元素)的子节点，并将它们替换为给定的字符串值。
在哪里放置元素?
style元素应该包含在header中:“<style>元素必须包含在文档. ...的<head>中”。(<时尚>…| MDN]
获得头部使用文件。Head，因为它已经被所有主要的浏览器支持了很长一段时间，所以不需要其他的回退。
这个对象变量将把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();
document.head.innerHTML += ' <时尚> h1 { 颜色:红色; ｝ p { 颜色:蓝色; ｝ > < /风格的 <标题>我是红色的!< / h1 > < p >我是蓝色!< / p >
到目前为止最直接的解决方案。您所要做的就是像通常声明样式标签一样，在反勾号之间输入
