如何用Javascript创build一个<style>标签
我正在寻找一种方法来插入<style>标签到JavaScript的HTML页面。
迄今为止我发现的最好的方法是：
var divNode = document.createElement("div"); divNode.innerHTML = "<br><style>h1 { background: red; }</style>"; document.body.appendChild(divNode);
这适用于Firefox，Opera和Internet Explorer，但不适用于Google Chrome。 对于IE来说，前面的代码有点难看。
有谁知道创build一个<style>标签的方法
- 更好
- 适用于Chrome？
或者可能
- 这是我应该避免的一个非标准的事情
- 三个工作的浏览器是伟大的，谁使用Chrome吗？
我很欣赏这方面的任何build议。
尝试将style元素添加到head而不是body 。
这在IE（7-9），Firefox，Opera和Chrome中进行了testing：
var css = 'h1 { background: red; }', head = document.head || document.getElementsByTagName('head')[0], style = document.createElement('style'); style.type = 'text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style);
我假设你想插入一个style标签与link标签（引用一个外部的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 。 这实际上是一种将数据插入页面的非标准方式。 最佳做法是创build一个文本节点并将其附加到另一个元素节点。
关于你最后的问题，你会听到一些人说，你的工作应该在所有的浏览器上工作。 这一切都取决于你的观众。 如果您的听众中没有人使用Chrome，那么请不要冒汗; 但是，如果您希望能够覆盖最大的受众群体，则最好支持所有主要的A级浏览器
下面是一个脚本，它将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');
并通过dynamic创build规则
var sheet = document.createStyleSheet(); sheet.addRule('h1', 'background: red;');
一个适用于所有浏览器的示例：
var ss = document.createElement("link"); ss.type = "text/css"; ss.rel = "stylesheet"; ss.href = "style.css"; document.getElementsByTagName("head")[0].appendChild(ss);
对于那些已经使用jQuery的人 ，你可以使用这一行：
$('<style>'+ styles +'</style>').appendTo(document.head);
就是这样了。 您也可以保存对此元素的引用，以便稍后进行更改。
这是一个dynamic添加类的变体
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); } } }
通常需要覆盖现有的规则，因此在HEAD中添加新的样式在每种情况下都不起作用。
我想出了这个简单的函数，总结了所有无效的 “附加到BODY”的方法，只是使用和debugging（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
这个对象variables会将样式标签附加到头部标签中，并使用types属性和一个简单的过渡规则来匹配每一个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();
一切正常，但对于styleNode.cssText在IE6中使用由javascipt创build的节点来工作，您需要在设置cssText之前将节点附加到文档;
更多信息@ http://msdn.microsoft.com/en-us/library/ms533698%28VS.85%29.aspx
