如何用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>标签的方法

  1. 更好
  2. 适用于Chrome?

或者可能

  1. 这是我应该避免的一个非标准的事情
  2. 三个工作的浏览器是伟大的,谁使用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