如何使用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>标记更好和Chrome一起工作吗？或者也许这是我应该避免的不标准的事情。三种正常工作的浏览器都很不错，还有谁在使用Chrome呢？

Answer 1

尝试添加style元素的head而不是body.

这在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));}

Answer 2

下面是一个添加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;');