我正在寻找一种方法,将一个<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呢?


当前回答

我假设你想要插入一个样式标签而不是一个链接标签(引用外部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。这实际上是一种将数据插入页面的非标准方式。最佳实践是创建一个文本节点并将其附加到另一个元素节点。

关于你的最后一个问题,你会听到有人说你的工作应该在所有浏览器上都能工作。这完全取决于你的受众。如果你的听众中没有人在使用Chrome,那么不要担心;然而,如果你想要获得尽可能多的用户,那么最好支持所有主要的a级浏览器

其他回答

通常情况下,需要重写现有的规则,因此向HEAD添加新样式并不适用于所有情况。

我想出了这个简单的函数,它总结了所有无效的“追加到BODY”方法,只是更方便使用和调试(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

我假设你想要插入一个样式标签而不是一个链接标签(引用外部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。这实际上是一种将数据插入页面的非标准方式。最佳实践是创建一个文本节点并将其附加到另一个元素节点。

关于你的最后一个问题,你会听到有人说你的工作应该在所有浏览器上都能工作。这完全取决于你的受众。如果你的听众中没有人在使用Chrome,那么不要担心;然而,如果你想要获得尽可能多的用户,那么最好支持所有主要的a级浏览器

你写的:

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上运行。

下面是一个脚本,它将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;');

最琐碎的答案:

function addStyle (styleText) {
  const styleNode = document.createElement('style'); 
  styleNode.type = 'text/css'; 
  styleNode.textContent = styleText;
  document.documentElement.appendChild(styleNode);  
  return styleNode;
}