我正在寻找一种方法，将一个<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 addStyle (styleText) {
const styleNode = document.createElement('style');
styleNode.type = 'text/css';
styleNode.textContent = styleText;
document.documentElement.appendChild(styleNode);
return styleNode;
}
其他回答
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，因为它已经被所有主要的浏览器支持了很长一段时间，所以不需要其他的回退。
下面是一个脚本，它将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;');
当你像这样调用appendStyle函数时，这个函数会注入css: appendStyle('你想要注入的css ')
这是通过向文档头部注入样式节点来实现的。这与通常用于延迟加载JavaScript的技术类似。 它在大多数现代浏览器中始终如一地工作。
appendStyle = function (content) { style = document.createElement('STYLE'); style.type = 'text/css'; style.appendChild(document.createTextNode(content)); document.head.appendChild(style); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>Lorem Ipsum</h1> <p>dolar sit amet</p> <button onclick='appendStyle("body { background-color: #ff0000;}h1 { font-family: Helvetica, sans-serif; font-variant: small-caps; letter-spacing: 3px; color: #ff0000; background-color: #000000;}p { font-family: Georgia, serif; font-size: 14px; font-style: normal; font-weight: normal; color: #000000; background-color: #ffff00;}")'>Press me to inject CSS!</button> </body> </html>
你也可以使用下面的代码片段惰性加载外部CSS文件:
appendExternalStyle = function (content) { link = document.createElement('LINK'); link.rel = 'stylesheet'; link.href = content; link.type = 'text/css'; document.head.appendChild(link); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> html { font-family: sans-serif; font-display: swap; } </style> </head> <body> <h1>Lorem Ipsum</h1> <p>dolar sit amet</p> <button onclick='appendExternalStyle("data:text/css;base64,OjotbW96LXNlbGVjdGlvbntjb2xvcjojZmZmIWltcG9ydGFudDtiYWNrZ3JvdW5kOiMwMDB9OjpzZWxlY3Rpb257Y29sb3I6I2ZmZiFpbXBvcnRhbnQ7YmFja2dyb3VuZDojMDAwfWgxe2ZvbnQtc2l6ZToyZW19Ym9keSxodG1se2NvbG9yOnJnYmEoMCwwLDAsLjc1KTtmb250LXNpemU6MTZweDtmb250LWZhbWlseTpMYXRvLEhlbHZldGljYSBOZXVlLEhlbHZldGljYSxzYW5zLXNlcmlmO2xpbmUtaGVpZ2h0OjEuNjd9YnV0dG9uLGlucHV0e292ZXJmbG93OnZpc2libGV9YnV0dG9uLHNlbGVjdHstd2Via2l0LXRyYW5zaXRpb24tZHVyYXRpb246LjFzO3RyYW5zaXRpb24tZHVyYXRpb246LjFzfQ==")'>press me to inject css!</button> </body> </html>
你写的:
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上运行。
如果您面临的问题是将一串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以上工作
