webentwicklung-frage-antwort-db.com.de

CSS mit <head> mit JavaScript hinzufügen?

Gibt es eine Möglichkeit, css aus einem String in der Javascript-Datei mit JavaScript in den Kopf eines Dokuments einzufügen?

Nehmen wir an, wir haben eine Webseite, die ein Leuchtkasten-Skript enthält. Dieses Skript benötigt eine CSS-Datei, um zu funktionieren. 

Durch das Hinzufügen dieser CSS-Datei mit <link> wird die CSS-Datei auch für Benutzer heruntergeladen, für die js nicht aktiviert ist. 

Ich weiß, dass ich die CSS-Datei dynamisch mit dem Skript laden kann. Dies bedeutet jedoch auch, dass es 2 HTTP-Anforderungen gibt. In Fällen, in denen nur wenig oder gar keine CSS in der Datei enthalten ist, finde ich dies ineffizient. 

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

Aber ich habe im Internet nichts gefunden, was darauf hindeutet, dass dies möglich ist. Ist es also möglich, mit js css an den Kopf hinzuzufügen?

Bearbeiten + LÖSUNG:

Ich habe die Antwort von roryf 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);
 }
56
Timo Huovinen

Wie Sie versuchen, mit JavaScript eine Zeichenfolge von CSS zu <head> hinzuzufügen? Durch das Einfügen eines CSS-Strings in eine Seite ist dies mit dem <link>-Element einfacher als mit dem <style>-Element.

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.

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 in IE 5.5 aufwärts

Die von Ihnen markierte Lösung funktioniert, aber für diese Lösung sind weniger dom-Vorgänge und nur ein einziges Element erforderlich.

17
moefinley

Wenn Sie sich nicht auf eine Javascript-Bibliothek verlassen möchten, können Sie document.write() verwenden, um die erforderliche, in style-Tags eingeschlossene css direkt in das Dokument head auszuspucken:

<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 Sinn darin, etwas überkompliziert zu machen, das bereits mit allen Browsern funktioniert. Viel Glück!

http://jsbin.com/oqede3/edit

24
Jeriko

Edit: Wie Atspulgs Kommentar vorschlägt, 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.


Sie können die Bibliothek jQuery verwenden, um Ihr head-Element auszuwählen und HTML anzufügen, und zwar auf folgende Weise:

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

Sie finden ein komplettes Tutorial für dieses Problem hier

24
thomaux

Eine einfache Nicht-jQuery-Lösung, jedoch mit einem gewissen 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, dass IE keine Einstellung von innerText, innerHTML oder die Verwendung von appendChild für style-Elemente erlaubt. Hier ist ein Fehlerbericht , der dies demonstriert, obwohl ich denke, dass er das Problem falsch identifiziert. Die obige Problemumgehung stammt aus den Kommentaren des Fehlerberichts und wurde in IE6 und IE9 getestet.

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

14
roryf

Hier ist eine Funktion, die dynamisch eine CSS-Regel in allen gängigen Browsern erstellt. createCssRule nimmt einen Selektor (z. B. "p.purpleText"), eine Regel (z. B. "color: purple;") und optional eine 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;");
9
Tim Down

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)
}
0
Ally