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

Question

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

Gefragt el 7 de Februar, 2009: Wann wurde die Frage gestellt
402532 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

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

Ist netter
Funktioniert mit Chrome?

Oder vielleicht

Dies ist eine unübliche Sache, die ich vermeiden sollte
Drei funktionierende Browser sind großartig, und wer benutzt schon Chrome?

Gefragt el 7 de Februar, 2009 von Nicht registrierter Benutzer

Answer 1

5 Antworten

Answer 2

821voto

Christoph Punkte 157217

Versuchen Sie, die style Element zum head und nicht die body .

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

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

Beantwortet el 7 de Februar, 2009 von Christoph (157217 Punkte )

Answer 3

112voto

vsync Punkte 101339

<style> Tags sollten innerhalb der <head> Element, und jedes hinzugefügte Tag sollte am Ende des <head> Tag.

Verwendung von insertAdjacentHTML um ein Style-Tag in das Dokument einzufügen Kopf-Tag :

Einheimisches DOM:

document.head.insertAdjacentHTML("beforeend", `<style>body{background:red}</style>`)

jQuery:

$('<style>').text("body{background:red}").appendTo(document.head)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Beantwortet el 22 de Februar, 2015 von vsync (101339 Punkte )

Answer 4

66voto

touchmarine Punkte 911

const style = document.createElement("style")
style.textContent = "h1 { background-color: red; }"
document.head.appendChild(style)

Der moderne und einfache Weg

Der obige Code ist das Wesentliche; lesen Sie weiter, wenn Sie die Gründe dafür erfahren möchten.

Warum eine andere Antwort? Die akzeptierte Antwort ist veraltet und enthält überflüssigen Code für veraltete Browser wie den Internet Explorer. Andere Antworten sind unnötig komplex oder verwenden Eigenschaften wie .innerHTML die Cross-Site-Scripting-Angriffe ermöglichen.

En `type` Eigenschaft wird nicht benötigt

Die meisten Antworten setzen die type Eigenschaft wie folgt: style.type = "text/css" . Die Einstellung dieser Eigenschaft ist nicht erforderlich, es sei denn, Sie müssen ältere Browser unterstützen.

Nach Angaben von <style>: Das Element für Stilinformationen - HTML | MDN die type ist optional und wird standardmäßig mit text/css :

type

Dieses Attribut definiert die Formatierungssprache als MIME-Typ (der Zeichensatz sollte nicht angegeben werden). Dieses Attribut ist optional und hat den Standardwert text/css wenn es nicht angegeben ist; andere Werte als die leere Zeichenkette oder text/css werden nicht verwendet. Nota : Es gibt kaum einen Grund, dieses Attribut in moderne Webdokumente aufzunehmen.

Hinzufügen des CSS

Um das CSS hinzuzufügen, verwenden Sie .textContent da sie sicherer und schneller ist als alternative Methoden. Im Gegensatz zu .innerHTML wird HTML nicht geparst und kann daher verhindern, dass Cross-Site-Scripting-Angriffe .

Eine weitere ähnliche Eigenschaft, .innerText ist wie .textContent aber berücksichtigt CSS-Stile und stellt nur den "gerenderten" Textinhalt dar. Da wir nicht an "gerendertem" Inhalt interessiert sind, bevorzugen wir .textContent .

Was bedeutet die Einstellung `.textContent` tun?

Einstellung der .textContent Eigenschaft entfernt alle Kinder des Knotens (Elements) und ersetzt sie durch den angegebenen String-Wert.

Wo soll das Element platziert werden?

Das Stilelement sollte in den Kopf eingefügt werden: "Die <style> Element muss innerhalb der <head> des Dokuments. ...". [ <style> ... | MDN ]

Um den Kopf zu erhalten, verwenden Sie document.head wie sie es war unterstützt von allen wichtigen Browsern schon seit langem, so dass es keinen Bedarf für weitere Ausweichmöglichkeiten gibt.

Beantwortet el 10 de Oktober, 2021 von touchmarine (911 Punkte )

Answer 5

39voto

Christoph Punkte 157217

Hier ist ein Skript, das den IE-Stil hinzufügt createStyleSheet() y addRule() Methoden in Browsern, die diese nicht haben:

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 hinzufügen über

document.createStyleSheet('foo.css');

und erstellen Sie dynamisch Regeln über

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

Beantwortet el 8 de Februar, 2009 von Christoph (157217 Punkte )

Answer 6

39voto

Tom Punkte 14658

Ich gehe davon aus, dass Sie eine style Tag gegenüber einem link Tag (mit Verweis auf ein externes CSS), so dass das folgende Beispiel genau das tut:

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

Außerdem ist mir in Ihrer Frage aufgefallen, dass Sie Folgendes verwenden innerHTML . Dies ist eigentlich eine nicht standardisierte Art, Daten in eine Seite einzufügen. Am besten ist es, einen Textknoten zu erstellen und ihn an einen anderen Elementknoten anzuhängen.

Was Ihre letzte Frage betrifft, so werden Sie einige Leute sagen hören, dass Ihre Arbeit in allen Browsern funktionieren sollte. Das hängt alles von Ihrem Publikum ab. Wenn niemand in Ihrer Zielgruppe Chrome benutzt, dann machen Sie sich nichts draus; wenn Sie jedoch ein möglichst großes Publikum erreichen wollen, dann ist es am besten, alle wichtigen A-Browser zu unterstützen

Beantwortet el 7 de Februar, 2009 von Tom (14658 Punkte )

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

Antworten

Einheimisches DOM:

jQuery:

Der moderne und einfache Weg

En `type` Eigenschaft wird nicht benötigt

Hinzufügen des CSS

Was bedeutet die Einstellung `.textContent` tun?

Wo soll das Element platziert werden?

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

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

Antworten

Einheimisches DOM:

jQuery:

Der moderne und einfache Weg

En type Eigenschaft wird nicht benötigt

Hinzufügen des CSS

Was bedeutet die Einstellung .textContent tun?

Wo soll das Element platziert werden?

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

En `type` Eigenschaft wird nicht benötigt

Was bedeutet die Einstellung `.textContent` tun?