wake-up-neo.com

So erstellen Sie ein <style> -Tag mit Javascript?

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

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, jedoch nicht in Google Chrome. Auch mit dem <br> vor dem IE ist es etwas hässlich.

Kennt jemand eine Möglichkeit, ein <style>-Tag zu erstellen

  1. Ist schöner

  2. Funktioniert mit Chrome?

Oder vielleicht

  1. Dies ist eine nicht standardmäßige Sache, die ich vermeiden sollte

  2. Drei funktionierende Browser sind großartig und wer verwendet Chrome eigentlich?

javascripthtmlcss
282
Arend

Fügen Sie das style-Element statt der head zur body hinzu.

Dies wurde in IE (7-9), Firefox, Opera und Chrome getestet:

var css = 'h1 { background: red; }',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('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));
}

head.appendChild(style);
559
Christoph

Hier ist ein Skript, das den Browsern, denen diese nicht zur Verfügung stehen, die IE-style createStyleSheet() und addRule() Methoden hinzufügt:

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

Sie können externe Dateien über hinzufügen

document.createStyleSheet('foo.css');

und dynamisch Regeln erstellen über

var sheet = document.createStyleSheet();
sheet.addRule('h1', 'background: red;');
32
Christoph

Ich gehe davon aus, dass Sie ein style-Tag und ein link-Tag einfügen möchten (das auf ein externes CSS verweist).

<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>

In Ihrer Frage ist mir auch aufgefallen, dass Sie innerHTML verwenden. Dies ist eigentlich eine nicht standardisierte Methode zum Einfügen von Daten in eine Seite. Am besten erstellen Sie einen Textknoten und hängen ihn an einen anderen Elementknoten an.

In Bezug auf Ihre letzte Frage hören Sie einige Leute sagen, dass Ihre Arbeit in allen Browsern funktionieren sollte. Es hängt alles von Ihrem Publikum ab. Wenn niemand in Ihrem Publikum Chrome verwendet, dann schwitzen Sie es nicht. Wenn Sie jedoch das größtmögliche Publikum erreichen möchten, sollten Sie alle großen Browser der Klasse A unterstützen

29
Tom

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);
21
belaz

Für diejenigen, die bereits jQuery verwenden, können Sie diesen Einzeiler verwenden:

$('<style>'+ styles +'</style>').appendTo(document.head);
15
vsync

Häufig müssen vorhandene Regeln überschrieben werden, sodass das Anhängen neuer Stile an HEAD nicht in jedem Fall funktioniert.

Ich habe mir diese einfache Funktion ausgedacht, die alle nicht gültig "An den BODY anhängen" -Ansätze zusammenfasst und einfach zu benutzen und zu debuggen ist (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

6
Garlaro

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

Alles in Ordnung, aber damit styleNode.cssText in IE6 mit einem von javascipt erstellten Knoten funktioniert, müssen Sie den Knoten an das Dokument anhängen, bevor Sie den cssText festlegen.

weitere Informationen @ http://msdn.Microsoft.com/de-de/library/ms533698%28VS.85%29.aspx

4
Tony

Diese Objektvariable fügt dem head-Tag ein style-Tag mit type-Attribut und einer einfachen Übergangsregel darin hinzu, die jeder einzelnen id/class/element entspricht. Fühlen Sie sich frei, um content property zu ändern und so viele Regeln einzufügen, wie Sie benötigen. Stellen Sie nur sicher, dass die css-Regeln in content in einer Zeile verbleiben (oder "escape" jeder neuen Zeile, wenn Sie dies bevorzugen). 

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

Diese Funktion fügt css automatisch ein, wenn Sie die Funktion appendStyle wie folgt aufrufen: appendstyle('css you want to inject'). Dies funktioniert, indem ein style-Knoten in den Kopf des Dokuments eingefügt wird. Dies ist eine ähnliche Technik wie bei der Verwendung von Lazy-Load-Javascript. es funktioniert in den meisten Browsern konsistent.

appendStyle = function (content) {
      style = document.createElement('STYLE');
      style.type = 'text/css';
      style.appendChild(document.createTextNode(content));
      document.head.appendChild(style);

    }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

  <h1>this is injected css</h1>
  <p>heloo, this is stuff, hkasjdhakhd</p>
  <button onclick='appendStyle("body {background-color:#ff0000;} h1{font-family:Helvetica, sans-serif;font-variant:small-caps;letter-spacing:3px;color:#ff0000;background-color:#000000;} p {font-family:Georgia, serif;font-size:14px;font-style:normal;font-weight:normal;color:#000000;background-color:#ffff00;}")'>press me to inject css!</button>
</body>

</html>
Sie können externe CSS-Dateien auch mit dem folgenden Snippet laden.

appendExternalStyle = function (content) {
      link = document.createElement('LINK');
      link.rel = 'stylesheet';
      link.href = content;
      link.type = 'text/css'; 
      document.head.appendChild(link);

    }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>html{font-family: sans-serif; 
font-display: swap;}</style>
</head>
<body>

  <h1>this is injected css</h1>
  <p>heloo, this is stuff, hkasjdhakhd</p>
  <button onclick='appendExternalStyle("data:text/css;base64,OjotbW96LXNlbGVjdGlvbntjb2xvcjojZmZmIWltcG9ydGFudDtiYWNrZ3JvdW5kOiMwMDB9OjpzZWxlY3Rpb257Y29sb3I6I2ZmZiFpbXBvcnRhbnQ7YmFja2dyb3VuZDojMDAwfWgxe2ZvbnQtc2l6ZToyZW19Ym9keSxodG1se2NvbG9yOnJnYmEoMCwwLDAsLjc1KTtmb250LXNpemU6MTZweDtmb250LWZhbWlseTpMYXRvLEhlbHZldGljYSBOZXVlLEhlbHZldGljYSxzYW5zLXNlcmlmO2xpbmUtaGVpZ2h0OjEuNjd9YnV0dG9uLGlucHV0e292ZXJmbG93OnZpc2libGV9YnV0dG9uLHNlbGVjdHstd2Via2l0LXRyYW5zaXRpb24tZHVyYXRpb246LjFzO3RyYW5zaXRpb24tZHVyYXRpb246LjFzfQ==")'>press me to inject css!</button>
</body>

</html>

3
Joel Ellis
var list = document.querySelector("head");
list.innerHTML += '<style>
                      h3.header-6.basket-item--header 
                      span.cusplus {
                         color:#c00; 
                      }.
                      cusname{
                         color:grey;font-size:14px;
                      }
                  </style>';

200% Arbeitscode, Beispiel oben

0
Kabirr singh sahni

Sie schrieben:

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

Warum nicht das?

var styleNode = document.createElement("style");
document.head.appendChild(styleNode);

Daher können Sie CSS-Regeln einfach an den HTML-Code anhängen:

styleNode.innerHTML = "h1 { background: red; }\n";
styleNode.innerHTML += "h2 { background: green; }\n";

... oder direkt zum DOM:

styleNode.sheet.insertRule("h1 { background: red; }");
styleNode.sheet.insertRule("h2 { background: green; }");

Ich erwarte, dass dies überall funktioniert, außer bei archaischen Browsern.

Funktioniert definitiv in Chrome im Jahr 2019.

0
7vujy0f0hy

Wenn das Problem, mit dem Sie konfrontiert sind, einen CSS-String in eine Seite einfügt, ist dies mit dem Element <link> einfacher als mit dem Element <style>.

Im Folgenden wird der Seite eine p { color: green; }-Regel hinzugefügt.

<link rel="stylesheet" type="text/css" href="data:text/css;charset=UTF-8,p%20%7B%20color%3A%20green%3B%20%7D" />

Sie können dies in JavaScript erstellen, indem Sie die CSS-Zeichenfolge mit einer URL kodieren und das Attribut HREF hinzufügen. Viel einfacher als alle Eigenheiten von <style>-Elementen oder direkter Zugriff auf Stylesheets.

let linkElement: HTMLLinkElement = this.document.createElement('link');
linkElement.setAttribute('rel', 'stylesheet');
linkElement.setAttribute('type', 'text/css');
linkElement.setAttribute('href', 'data:text/css;charset=UTF-8,' + encodeURIComponent(myStringOfstyles));

Dies funktioniert in IE 5.5 aufwärts

0
moefinley
this link may helpful to you:

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

0
Vinod Poorma