如何用Javascript创建<style>标签？

通常需要覆盖现有规则,因此在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);
        }
        // 
 for IE: http://goo.gl/vLY4x7
        temp.innerHTML = '
';
        wrap.appendChild( temp.children[1] );
    };
})(document);

演示:codepen,jsfiddle

以下是动态添加类的变体

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

该对象变量会将style标签附加到具有type属性和一个简单转换规则的head标签上，该规则与每个id / class / element匹配。可以随意修改content属性并根据需要注入任意数量的规则。只要确保内容中的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();