如何使用Javascript创建<Style>标记？

Question

如何使用Javascript创建<Style>标记？

我正在寻找一种插入<style>标记到带有JavaScript的HTML页面中。

到目前为止我找到的最好的方法是：

var divNode = document.createElement("div");divNode.innerHTML = "<br><style>h1 { background: red; }</style>";document.body.appendChild(divNode);

这在Firefox、Opera和InternetExplorer中都适用，但在GoogleChrome中就不行了。而且它有点丑陋<br>在IE的前面。

有谁知道如何创建一个<style>标记

1. 更好

2. 和Chrome一起工作吗？

或者也许

1. 这是我应该避免的不标准的事情。

2. 三种正常工作的浏览器都很不错，还有谁在使用Chrome呢？

Answer 1

尝试添加style元素的head而不是body.这在IE(7-9)、Firefox、Opera和Chrome中进行了测试：var&nbsp;css&nbsp;=&nbsp;'h1&nbsp;{&nbsp;background:&nbsp;red;&nbsp;}', &nbsp;&nbsp;&nbsp;&nbsp;head&nbsp;=&nbsp;document.head&nbsp;||&nbsp;document.getElementsByTagName('head')[0], &nbsp;&nbsp;&nbsp;&nbsp;style&nbsp;=&nbsp;document.createElement('style');head.appendChild(style);style.type&nbsp;=&nbsp;'text/css';if&nbsp;(style.styleSheet){ &nbsp;&nbsp;//&nbsp;This&nbsp;is&nbsp;required&nbsp;for&nbsp;IE8&nbsp;and&nbsp;below. &nbsp;&nbsp;style.styleSheet.cssText&nbsp;=&nbsp;css;}&nbsp;else&nbsp;{ &nbsp;&nbsp;style.appendChild(document.createTextNode(css));}

Answer 2

下面是一个添加IE风格的脚本createStyleSheet()和addRule()方法到没有浏览器的浏览器：if(typeof&nbsp;document.createStyleSheet&nbsp;===&nbsp;'undefined')&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;document.createStyleSheet&nbsp;=&nbsp;(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;createStyleSheet(href)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(typeof&nbsp;href&nbsp;!==&nbsp;'undefined')&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;element&nbsp;=&nbsp;document.createElement('link'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;element.type&nbsp;=&nbsp;'text/css'; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;element.rel&nbsp;=&nbsp;'stylesheet'; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;element.href&nbsp;=&nbsp;href; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;element&nbsp;=&nbsp;document.createElement('style'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;element.type&nbsp;=&nbsp;'text/css'; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementsByTagName('head')[0].appendChild(element); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;sheet&nbsp;=&nbsp;document.styleSheets[document.styleSheets.length&nbsp;-&nbsp;1]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(typeof&nbsp;sheet.addRule&nbsp;===&nbsp;'undefined') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sheet.addRule&nbsp;=&nbsp;addRule; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(typeof&nbsp;sheet.removeRule&nbsp;===&nbsp;'undefined') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sheet.removeRule&nbsp;=&nbsp;sheet.deleteRule; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;sheet; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;addRule(selectorText,&nbsp;cssText,&nbsp;index)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(typeof&nbsp;index&nbsp;===&nbsp;'undefined') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;index&nbsp;=&nbsp;this.cssRules.length; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.insertRule(selectorText&nbsp;+&nbsp;'&nbsp;{'&nbsp;+&nbsp;cssText&nbsp;+&nbsp;'}',&nbsp;index); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;createStyleSheet; &nbsp;&nbsp;&nbsp;&nbsp;})();}您可以通过document.createStyleSheet('foo.css');并通过以下方式动态创建规则var&nbsp;sheet&nbsp;=&nbsp;document.createStyleSheet();sheet.addRule('h1',&nbsp;'background:&nbsp;red;');