Wie erstellt man einen <style>-Tag mit Javascript?

Question

Ich suche nach einer Möglichkeit, eine <style> Tag in eine HTML-Seite mit JavaScript einfügen.

Das ist der beste Weg, den ich bisher gefunden habe:

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

Dies funktioniert in Firefox, Opera und Internet Explorer, aber nicht in Google Chrome. Außerdem ist es ein bisschen hässlich mit dem <br> vorne für IE.

Kennt jemand eine Möglichkeit zur Erstellung eines <style> Tag, der

1. Ist netter

2. Funktioniert mit Chrome?

Oder vielleicht

1. Dies ist eine unübliche Sache, die ich vermeiden sollte

2. Drei funktionierende Browser sind großartig, und wer benutzt schon Chrome?

Answer 1

Ein Beispiel, das funktioniert und mit allen Browsern kompatibel ist:

var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "style.css";
document.getElementsByTagName("head")[0].appendChild(ss);

Answer 2

document.head.innerHTML += `
  <style>
    h1 {
      color: red; 
    }
    p {
      color: blue;
    }
  </style>`

<h1>I'm red!</h1>
<p>I'm blue!</p>

Das ist bei weitem die einfachste Lösung. Alles, was Sie tun müssen, ist die gleiche Eingabe wie bei der normalen Deklaration style Tags, zwischen den Backticks

Answer 3

Oft ist es notwendig, bestehende Regeln außer Kraft zu setzen, so dass das Anhängen neuer Stile an den HEAD nicht in jedem Fall funktioniert.

Ich habe diese einfache Funktion entwickelt, die alle Informationen zusammenfasst nicht gültig "append to the BODY" Ansätze und ist einfach bequemer zu bedienen und zu debuggen (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);

Demo: codepen , jsfiddle

Answer 4

Hier ist eine Variante zum dynamischen Hinzufügen einer Klasse

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

Answer 5

Diese Objektvariable fügt dem head-Tag ein style-Tag mit type-Attribut und einer einfachen Übergangsregel hinzu, die zu jeder einzelnen id/class/element passt. Fühlen Sie sich frei zu ändern Inhalt Eigenschaft und fügen Sie so viele Regeln ein, wie Sie benötigen. Stellen Sie nur sicher, dass die CSS-Regeln innerhalb von Inhalt in einer Zeile bleiben (oder jede neue Zeile mit einem "Escape" versehen, wenn Sie dies wünschen).

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