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

Jeder, der auf der Suche nach einer Typescript-Version ist,

const addStyles = (styles) => {
  let styleNode : HTMLStyleElement = document.createElement('style'); 
  styleNode.type = 'text/css'; 
  if (styleNode.style)  
    styleNode.style.cssText = styles; 
  else  
    styleNode.appendChild(document.createTextNode(styles)); 

  /* Append style to the head element */ 
  document.head.appendChild(styleNode);  
}

Auch in React/Vue/Angular, wenn direkte Injektion von CSS erforderlich ist, können Sie verwenden posstcss-js um CSS in JSS zu konvertieren, und verwenden Sie CSS-in-JSS um ein neues styleSheet direkt einzufügen. Für weitere Informationen, folgen Sie bitte diesem Dokumentation .

Update

Sie können verwenden document.head sowie nach dem Kommentar von @Brandon McConnell.

Answer 2

Die trivialste Antwort:

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

Answer 3

this link may helpful to you: 

http://jonraasch.com/blog/javascript-style-node