CSS mit JavaScript zu <head> hinzufügen?

Question 1

Gibt es eine Möglichkeit, CSS aus einer Zeichenfolge in der Javascript-Datei zum Kopf eines Dokuments mit Javascript hinzuzufügen?

Angenommen, wir haben eine Webseite mit einem Lightbox-Skript. Für dieses Skript ist eine CSS-Datei erforderlich.

<link>Wenn Sie nun diese CSS-Datei mit hinzufügen, wird die CSS-Datei auch für Personen heruntergeladen, für die js nicht aktiviert ist.

Ich weiß, dass ich die CSS-Datei dynamisch mit dem Skript laden kann, aber das bedeutet auch, dass es 2 http-Anforderungen gibt, und in Fällen, in denen wenig bis gar kein CSS in der Datei vorhanden ist, finde ich dies ineffizient.

Also dachte ich mir, was wäre, wenn Sie das CSS, das Sie in der CSS-Datei haben, in das Skript einfügen, das Skript das CSS analysieren und in den Kopf einfügen könnten, oder noch besser, das Skript das CSS direkt hinzufügen lassen sollte das <head>des Dokuments.

Aber ich habe online nichts gefunden, was darauf hindeutet, dass dies möglich ist. Ist es also möglich, dem Kopf mit js CSS hinzuzufügen?

Bearbeiten + LÖSUNG:

Ich habe Roryfs Antwort bearbeitet, um browserübergreifend zu arbeiten (außer IE5).

Javascript:

 function addcss(css){
    var head = document.getElementsByTagName('head')[0];
    var s = document.createElement('style');
    s.setAttribute('type', 'text/css');
    if (s.styleSheet) {   // IE
        s.styleSheet.cssText = css;
    } else {                // the world
        s.appendChild(document.createTextNode(css));
    }
    head.appendChild(s);
 }

Question 2

Wie möchten Sie <head>mit JavaScript eine CSS-Zeichenfolge hinzufügen ? Wenn Sie eine CSS-Zeichenfolge in eine Seite einfügen, ist dies mit dem <link>Element einfacher als mit dem <style>Element.

Im Folgenden wird p { color: green; }der Seite eine 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 einfach durch URL-Codierung Ihrer CSS-Zeichenfolge und Hinzufügen des HREFAttributs erstellen . Viel einfacher als alle Macken von <style>Elementen oder der direkte Zugriff auf Stylesheets.

var linkElement = 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 ab IE 5.5

Die von Ihnen markierte Lösung funktioniert, diese Lösung erfordert jedoch weniger Dom-Operationen und nur ein einziges Element.

Question 3

Bearbeiten : Wie der Kommentar von Atspulgs andeutet, können Sie dasselbe ohne jQuery mit dem querySelector erreichen :

document.querySelector('head').innerHTML += '<link rel="stylesheet" href="styles.css" type="text/css"/>';

Ältere Antwort unten.

Mit der jQuery- Bibliothek können Sie Ihr head-Element auswählen und HTML anhängen, und zwar auf folgende Weise:

$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');

Ein vollständiges Tutorial zu diesem Problem finden Sie hier

Question 4

Wenn Sie sich nicht auf eine Javascript-Bibliothek verlassen möchten, können Sie document.write()das erforderliche CSS, das in styleTags verpackt ist , direkt in das Dokument ausspucken head:

<head>
  <script type="text/javascript">
    document.write("<style>body { background-color:#000 }</style>");
  </script>
  # other stuff..
</head>

Auf diese Weise vermeiden Sie das Auslösen einer zusätzlichen HTTP-Anforderung.

Es gibt andere Lösungen, die vorgeschlagen / hinzugefügt / entfernt wurden, aber ich sehe keinen Grund darin, etwas zu komplizieren, das bereits browserübergreifend funktioniert. Viel Glück!

http://jsbin.com/oqede3/edit

Question 5

Eine einfache Nicht-jQuery-Lösung, wenn auch mit einem kleinen Hack für den IE:

var css = ".lightbox { width: 400px; height: 400px; border: 1px solid #333}";

var htmlDiv = document.createElement('div');
htmlDiv.innerHTML = '<p>foo</p><style>' + css + '</style>';
document.getElementsByTagName('head')[0].appendChild(htmlDiv.childNodes[1]);

Es scheint IE erlaubt keine Einstellung innerText, innerHTMLoder die Verwendung appendChildauf styleElemente. Hier ist ein Fehlerbericht, der dies demonstriert, obwohl ich denke, dass er das Problem falsch identifiziert. Die obige Problemumgehung stammt aus den Kommentaren zum Fehlerbericht und wurde in IE6 und IE9 getestet.

Ob Sie dies, document.write oder eine komplexere Lösung verwenden, hängt wirklich von Ihrer Situation ab.

Question 6

Hier ist eine Funktion, die dynamisch eine CSS-Regel in allen gängigen Browsern erstellt. createCssRuleNimmt einen Selektor (zB "p.purpleText"), eine Regel (zB "Farbe: lila;") und optional a Document(das aktuelle Dokument wird standardmäßig verwendet):

var addRule;

if (typeof document.styleSheets != "undefined" && document.styleSheets) {
    addRule = function(selector, rule) {
        var styleSheets = document.styleSheets, styleSheet;
        if (styleSheets && styleSheets.length) {
            styleSheet = styleSheets[styleSheets.length - 1];
            if (styleSheet.addRule) {
                styleSheet.addRule(selector, rule)
            } else if (typeof styleSheet.cssText == "string") {
                styleSheet.cssText = selector + " {" + rule + "}";
            } else if (styleSheet.insertRule && styleSheet.cssRules) {
                styleSheet.insertRule(selector + " {" + rule + "}", styleSheet.cssRules.length);
            }
        }
    }
} else {
    addRule = function(selector, rule, el, doc) {
        el.appendChild(doc.createTextNode(selector + " {" + rule + "}"));
    };
}

function createCssRule(selector, rule, doc) {
    doc = doc || document;
    var head = doc.getElementsByTagName("head")[0];
    if (head && addRule) {
        var styleEl = doc.createElement("style");
        styleEl.type = "text/css";
        styleEl.media = "screen";
        head.appendChild(styleEl);
        addRule(selector, rule, styleEl, doc);
        styleEl = null;
    }
};

createCssRule("body", "background-color: purple;");

Question 7

Hier ist ein einfacher Weg.

/**
 * Add css to the document
 * @param {string} css
 */
function addCssToDocument(css){
  var style = document.createElement('style')
  style.innerText = css
  document.head.appendChild(style)
}

Answer 1

Gibt es eine Möglichkeit, CSS aus einer Zeichenfolge in der Javascript-Datei zum Kopf eines Dokuments mit Javascript hinzuzufügen?

Angenommen, wir haben eine Webseite mit einem Lightbox-Skript. Für dieses Skript ist eine CSS-Datei erforderlich.

<link>Wenn Sie nun diese CSS-Datei mit hinzufügen, wird die CSS-Datei auch für Personen heruntergeladen, für die js nicht aktiviert ist.

Ich weiß, dass ich die CSS-Datei dynamisch mit dem Skript laden kann, aber das bedeutet auch, dass es 2 http-Anforderungen gibt, und in Fällen, in denen wenig bis gar kein CSS in der Datei vorhanden ist, finde ich dies ineffizient.

Also dachte ich mir, was wäre, wenn Sie das CSS, das Sie in der CSS-Datei haben, in das Skript einfügen, das Skript das CSS analysieren und in den Kopf einfügen könnten, oder noch besser, das Skript das CSS direkt hinzufügen lassen sollte das <head>des Dokuments.

Aber ich habe online nichts gefunden, was darauf hindeutet, dass dies möglich ist. Ist es also möglich, dem Kopf mit js CSS hinzuzufügen?

Bearbeiten + LÖSUNG:

Ich habe Roryfs Antwort bearbeitet, um browserübergreifend zu arbeiten (außer IE5).

Javascript:

 function addcss(css){
    var head = document.getElementsByTagName('head')[0];
    var s = document.createElement('style');
    s.setAttribute('type', 'text/css');
    if (s.styleSheet) {   // IE
        s.styleSheet.cssText = css;
    } else {                // the world
        s.appendChild(document.createTextNode(css));
    }
    head.appendChild(s);
 }

Answer 2

1

Werfen Sie einen Blick auf den folgenden Link .. Es erklärt alle kleinen Details zu Ihrer Frage ... und es heißt entsprechend Totally Pwn CSS mit Javascript

Gabriele Petrioli

Answer 3

Verwandte Frage: stackoverflow.com/questions/524696/…

Timo Huovinen

Answer 4

26

Wie möchten Sie <head>mit JavaScript eine CSS-Zeichenfolge hinzufügen ? Wenn Sie eine CSS-Zeichenfolge in eine Seite einfügen, ist dies mit dem <link>Element einfacher als mit dem <style>Element.

Im Folgenden wird p { color: green; }der Seite eine 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 einfach durch URL-Codierung Ihrer CSS-Zeichenfolge und Hinzufügen des HREFAttributs erstellen . Viel einfacher als alle Macken von <style>Elementen oder der direkte Zugriff auf Stylesheets.

var linkElement = 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 ab IE 5.5

Die von Ihnen markierte Lösung funktioniert, diese Lösung erfordert jedoch weniger Dom-Operationen und nur ein einziges Element.

Moefinley
quelle

1

let linkElement: HTMLLinkElement = this.document.createElement('link');wird in IE 5.5 funktionieren, sagst du?

Jānis Elmeris

@ JānisElmeris, wenn Sie Javascript mit der von der dh verwendeten Syntax verwenden. createElement und setAttribute sind keine neuen Methoden.

Bogdan M.

@BogdanM. Nun, ich erwarte nur, dass der als "das wird funktionieren in ..." beschriebene Code tatsächlich bereits die richtige Syntax hat.

Jānis Elmeris

let linkElement: HTMLLinkElement = ...- Wie heißt diese Syntax?

Scott Martin

Entschuldigung, das ist ein Typescript-Typ. Es sollte eigentlich nicht da drin sein.

Moefinley

Answer 5

1

let linkElement: HTMLLinkElement = this.document.createElement('link');wird in IE 5.5 funktionieren, sagst du?

Jānis Elmeris

Answer 6

@ JānisElmeris, wenn Sie Javascript mit der von der dh verwendeten Syntax verwenden. createElement und setAttribute sind keine neuen Methoden.

Bogdan M.

Answer 7

@BogdanM. Nun, ich erwarte nur, dass der als "das wird funktionieren in ..." beschriebene Code tatsächlich bereits die richtige Syntax hat.

Jānis Elmeris

Answer 8

let linkElement: HTMLLinkElement = ...- Wie heißt diese Syntax?

Scott Martin

Answer 9

Entschuldigung, das ist ein Typescript-Typ. Es sollte eigentlich nicht da drin sein.

Moefinley

Answer 10

31

Bearbeiten : Wie der Kommentar von Atspulgs andeutet, können Sie dasselbe ohne jQuery mit dem querySelector erreichen :

document.querySelector('head').innerHTML += '<link rel="stylesheet" href="styles.css" type="text/css"/>';

Ältere Antwort unten.

Mit der jQuery- Bibliothek können Sie Ihr head-Element auswählen und HTML anhängen, und zwar auf folgende Weise:

$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');

Ein vollständiges Tutorial zu diesem Problem finden Sie hier

thomaux
quelle

4

Auch diese Methode lädt eine neue Datei, die Yuri vermeiden wollte. Außerdem ist es ziemlich dumm, die gesamte jQuery-Bibliothek für etwas so Einfaches wie dieses zu laden.

TRiG

4

ohne jQuery: document.querySelector ('head'). innerHTML + = '<link rel = "stylesheet" href = "styles.css" type = "text / css" />';

Atspulgs

3

document.headist das headElement!

Iharob Al Asimi

Answer 11

4

Auch diese Methode lädt eine neue Datei, die Yuri vermeiden wollte. Außerdem ist es ziemlich dumm, die gesamte jQuery-Bibliothek für etwas so Einfaches wie dieses zu laden.

TRiG

Answer 12

4

ohne jQuery: document.querySelector ('head'). innerHTML + = '<link rel = "stylesheet" href = "styles.css" type = "text / css" />';

Atspulgs

Answer 13

3

document.headist das headElement!

Iharob Al Asimi

Answer 14

26

Wenn Sie sich nicht auf eine Javascript-Bibliothek verlassen möchten, können Sie document.write()das erforderliche CSS, das in styleTags verpackt ist , direkt in das Dokument ausspucken head:

<head>
  <script type="text/javascript">
    document.write("<style>body { background-color:#000 }</style>");
  </script>
  # other stuff..
</head>

Auf diese Weise vermeiden Sie das Auslösen einer zusätzlichen HTTP-Anforderung.

Es gibt andere Lösungen, die vorgeschlagen / hinzugefügt / entfernt wurden, aber ich sehe keinen Grund darin, etwas zu komplizieren, das bereits browserübergreifend funktioniert. Viel Glück!

http://jsbin.com/oqede3/edit

Jeriko
quelle

13

Dies ist in Ordnung, bis Sie nach dem Rendern des Dokuments eine CSS-Regel hinzufügen möchten.

Tim Down

Gut, dass OP diese Anforderung dann nicht hat! Ihre Lösung deckt das ab, aber imho ist es für Over-JS / Lightbox-CSS-Verschlechterung völlig übertrieben.

Jeriko

2

Eines ist zu beachten: Funktioniert document.writenicht in echten XHTML-Dokumenten, aber das ist wahrscheinlich kein Problem, da kaum jemand XHTML wirklich verwendet.

Tim Down

Es ist interessant, dass es funktioniert, aber Stil im Körper zu haben, sieht ein bisschen hacky aus :) ps Sie können das document.write in den Kopfbereich der Site einfügen und es scheint gut zu funktionieren.

Timo Huovinen

1

Ich würde document.write so weit wie möglich vermeiden.

Orcra

Answer 15

13

Dies ist in Ordnung, bis Sie nach dem Rendern des Dokuments eine CSS-Regel hinzufügen möchten.

Tim Down

Answer 16

Gut, dass OP diese Anforderung dann nicht hat! Ihre Lösung deckt das ab, aber imho ist es für Over-JS / Lightbox-CSS-Verschlechterung völlig übertrieben.

Jeriko

Answer 17

2

Eines ist zu beachten: Funktioniert document.writenicht in echten XHTML-Dokumenten, aber das ist wahrscheinlich kein Problem, da kaum jemand XHTML wirklich verwendet.

Tim Down

Answer 18

Es ist interessant, dass es funktioniert, aber Stil im Körper zu haben, sieht ein bisschen hacky aus :) ps Sie können das document.write in den Kopfbereich der Site einfügen und es scheint gut zu funktionieren.

Timo Huovinen

Answer 19

1

Ich würde document.write so weit wie möglich vermeiden.

Orcra

Answer 20

14

Eine einfache Nicht-jQuery-Lösung, wenn auch mit einem kleinen Hack für den IE:

var css = ".lightbox { width: 400px; height: 400px; border: 1px solid #333}";

var htmlDiv = document.createElement('div');
htmlDiv.innerHTML = '<p>foo</p><style>' + css + '</style>';
document.getElementsByTagName('head')[0].appendChild(htmlDiv.childNodes[1]);

Es scheint IE erlaubt keine Einstellung innerText, innerHTMLoder die Verwendung appendChildauf styleElemente. Hier ist ein Fehlerbericht, der dies demonstriert, obwohl ich denke, dass er das Problem falsch identifiziert. Die obige Problemumgehung stammt aus den Kommentaren zum Fehlerbericht und wurde in IE6 und IE9 getestet.

Ob Sie dies, document.write oder eine komplexere Lösung verwenden, hängt wirklich von Ihrer Situation ab.

roryf
quelle

Funktioniert nicht im IE. Sicherlich nicht 6 oder 7, es stehen momentan keine 8 zum Testen zur Verfügung. IE mag nicht document.createElement('style').

Tim Down

@ Tim funktioniert für mich in IE6 und 9, da Ihre Lösung genau die gleiche Zeile hat, können Sie vielleicht weiter erklären

Roryf

@roryf: Oh ja, du hast recht, sorry. Dummerweise habe ich den elementaren Fehler gemacht, die Zeilennummer in den Fehler des IE zu glauben. Der Fehler ist tatsächlich in styleElement.innerHTML = css;. Sicherlich schlägt dies in IE 7 fehl und wird jetzt in IE 6 erneut getestet (wartet darauf, dass die VM lebendig wird).

Tim Down

@ Tim danke, ich vermutete, dass das ein Problem sein könnte, schade für mich, dass ich nicht richtig getestet habe!

Roryf

2

Ich konnte dies nicht alleine lassen, also habe ich ein bisschen recherchiert und eine Problemumgehung für den

Internet

Answer 21

Funktioniert nicht im IE. Sicherlich nicht 6 oder 7, es stehen momentan keine 8 zum Testen zur Verfügung. IE mag nicht document.createElement('style').

Tim Down

Answer 22

@ Tim funktioniert für mich in IE6 und 9, da Ihre Lösung genau die gleiche Zeile hat, können Sie vielleicht weiter erklären

Roryf

Answer 23

@roryf: Oh ja, du hast recht, sorry. Dummerweise habe ich den elementaren Fehler gemacht, die Zeilennummer in den Fehler des IE zu glauben. Der Fehler ist tatsächlich in styleElement.innerHTML = css;. Sicherlich schlägt dies in IE 7 fehl und wird jetzt in IE 6 erneut getestet (wartet darauf, dass die VM lebendig wird).

Tim Down

Answer 24

@ Tim danke, ich vermutete, dass das ein Problem sein könnte, schade für mich, dass ich nicht richtig getestet habe!

Roryf

Answer 25

2

Ich konnte dies nicht alleine lassen, also habe ich ein bisschen recherchiert und eine Problemumgehung für den

Internet

Answer 26

Hier ist eine Funktion, die dynamisch eine CSS-Regel in allen gängigen Browsern erstellt. createCssRuleNimmt einen Selektor (zB "p.purpleText"), eine Regel (zB "Farbe: lila;") und optional a Document(das aktuelle Dokument wird standardmäßig verwendet):

var addRule;

if (typeof document.styleSheets != "undefined" && document.styleSheets) {
    addRule = function(selector, rule) {
        var styleSheets = document.styleSheets, styleSheet;
        if (styleSheets && styleSheets.length) {
            styleSheet = styleSheets[styleSheets.length - 1];
            if (styleSheet.addRule) {
                styleSheet.addRule(selector, rule)
            } else if (typeof styleSheet.cssText == "string") {
                styleSheet.cssText = selector + " {" + rule + "}";
            } else if (styleSheet.insertRule && styleSheet.cssRules) {
                styleSheet.insertRule(selector + " {" + rule + "}", styleSheet.cssRules.length);
            }
        }
    }
} else {
    addRule = function(selector, rule, el, doc) {
        el.appendChild(doc.createTextNode(selector + " {" + rule + "}"));
    };
}

function createCssRule(selector, rule, doc) {
    doc = doc || document;
    var head = doc.getElementsByTagName("head")[0];
    if (head && addRule) {
        var styleEl = doc.createElement("style");
        styleEl.type = "text/css";
        styleEl.media = "screen";
        head.appendChild(styleEl);
        addRule(selector, rule, styleEl, doc);
        styleEl = null;
    }
};

createCssRule("body", "background-color: purple;");

Answer 27

Sehr gründliche Antwort, und ich glaube, es wird nützlich sein, aber es wird mühsam sein, ein einfaches CSS-Stylesheet zu nehmen und es in dieses zu konvertieren.

Timo Huovinen

Answer 28

Hier ist ein einfacher Weg.

/**
 * Add css to the document
 * @param {string} css
 */
function addCssToDocument(css){
  var style = document.createElement('style')
  style.innerText = css
  document.head.appendChild(style)
}

CSS mit JavaScript zu <head> hinzufügen?

Bearbeiten + LÖSUNG:

Antworten: