Wie lade ich css-Regeln dynamisch in Webkit (Safari/Chrome)?

Ich habe momentan Probleme in Webkit(Safari und Chrome), habe ich das versuchen zu laden dynamisch (innerHTML) einige html-Code in ein div-Element, das html enthält css-Regeln (...), nachdem das html gerendert wird die style-Definitionen werden nicht geladen (also optisch kann ich sagen, die styles sind nicht mehr da und auch wenn ich die Suche mit javascript für Sie keine styles).
Ich habe versucht, mit einer jquery-plugin tocssRule(), es funktioniert, aber es ist einfach zu langsam. Gibt es einen anderen Weg, um webkit zu laden, die Stile dynamisch?
Danke.
Patrick

InformationsquelleAutor | 2008-12-09
  1. 8

    Ich denke, es ist eine bessere Praxis zum Anhängen eines "link" - tag, um den Kopf des Dokuments. Wenn dies nicht möglich ist, versuchen zum Anhängen einer "Stil" - tag auf den Kopf. Style-tags sollten nicht in den Körper (nicht selbst überprüfen).

    Append link-tag:

    var link = document.createElement('link');

link.setAttribute('rel', 'stylesheet');

link.type = 'text/css';

link.href = 'http://example.com/stylesheet.css';

document.head.appendChild(link);

    Append style-tag:

    var style = document.createElement('style');

style.innerHTML = 'body { background-color: #F00; }';

document.head.appendChild(style);
    • innerHTML ist eine Methode veraltet und sollte nicht benutzt werden.
    • sind Sie falsch.
    • hmm ja ich weiß auch nicht, warum ich geschrieben habe, dass. Ich kann mich nicht erinnern, was ich dachte, als ich es schrieb.
    InformationsquelleAutor I.devries
  2. 4

    Straight-up jQuery-Weg (funktioniert auf gängigen Browsern, einschließlich Chrome): http://topsecretproject.finitestatemachine.com/2009/09/how-to-load-javascript-and-css-dynamically-with-jquery/

    Aus der Website:

    $("head").append("<link />");
var CSS = $("head").children(":last");
CSS.attr({
"rel": "stylesheet",
"type": "text/css",
"href": "url/to.css"
});

    Hinweis: das Beispiel enthält außerdem die Injektion von JS, die ignoriert werden können, wenn Sie nur wollen, um zu injizieren, eine CSS-Referenz.

    InformationsquelleAutor jeffreypriebe
  3. 2

    einfachste Weg (mit Hilfe von jQuery ist), ist die folgende:

    var cssLink = $('<link />');
cssLink.attr("rel","stylesheet")
cssLink.attr("type", "text/css");
cssLink.attr("href","url/to.css");

    Wenn du es genau so machen, dann funktioniert es in Safari. Wenn Sie es tun, die normalen jQuery-Weg (alle in einem text-string) wird es nicht (die css wird nicht geladen).

    Dann sind Sie einfach nur hängen Sie auf den Kopf mit $('Kopf').append(cssLink);

    InformationsquelleAutor
  4. 1

    Dank Vatos, du hast mich gut führen, im Grunde Tat ich das, was Sie vorgeschlagen, aber verwendet jquery, um den html und fügen Sie den neuen Stil auf den Kopf, da safari/chrome blockieren würde, wenn dabei innerHTML und document.Kopf wurde nicht definiert. Mein code endete wie folgt suchen

    var cssDefinitions = '..my style chunk goes here';
var style = document.createElement('style');'
$(style).html(cssDefinitions);
$('head').append(style);

    InformationsquelleAutor
  5. 1

    meh. Ich habe nicht genug Punkte zu Stimmen, bis Andrei Cimpoca das Ergebnis, aber diese Lösung ist der beste hier.

    Stil.innerHTML = "..."; funktioniert nicht in webkit-Motoren oder ie.

    Richtig zu injizieren css-text, müssen Sie:

    Stil.styleSheet.cssText = "..."; für den ie.

    und

    Stil.appendChild(document.createTextNode("...")); für webkit.

    Firefox funktionieren auch mit der zweiten option, oder mit Stil.innerHTML = "...";

    InformationsquelleAutor Doug
  6. 1

    Hier ist der gig. Was Patrick gesagt hat nicht funktioniert für mich. Hier ist, wie ich es Tat.

        var ref = document.createElement('style');
ref.setAttribute("rel", "stylesheet");
ref.setAttribute("type", "text/css");
document.getElementsByTagName("head")[0].appendChild(ref);
if(!!(window.attachEvent && !window.opera)) ref.styleSheet.cssText = asd;//this one's for ie
else ref.appendChild(document.createTextNode(asd));

    InnerHTML ist veraltet und sollte nicht verwendet werden, für so eine Sache. Darüber hinaus ist es langsamer zu.

    InformationsquelleAutor
  7. 0

    Neben dem style-tag basierten Versionen vor, können Sie auch Formatierungen mithilfe von javascript direkt:

    var style = document.getElementById('some-style-tag');
var sheet = style.sheet;
sheet.insertRule('.mydiv { background-color: ' + color + '; }', sheet.cssRules.length);

    Dies hat den Vorteil, dass Sie Variablen verwenden, die zimmerreserviereung, ohne das resort zu cssText/innerHTML.

    Beachten Sie, dass auf webkit-basierte Browser, die diese langsam, wenn Sie das einfügen einer Menge von Regeln. Es gibt einen bug öffnen Sie zum beheben dieses performance-Problem in webkit (https://bugs.webkit.org/show_bug.cgi?id=36303). Bis dahin können Sie mit style-tags für bulk-inserts.

    Dies ist der W3C-standard-Möglichkeit zum einfügen von Stilregeln, aber es ist nicht unterstützt von jeder version des IE: http://www.quirksmode.org/dom/w3c_css.html

    • document.querySelector('#x').style.sheet ist nicht definiert.
    InformationsquelleAutor tstanis
  8. 0

    Ich weiß, es ist ein älteres Thema, aber dachte, jemand würde profitieren. Auch ich brauchte zum laden von css dynamisch in meine Seite (vorher alles gerendert onload, nach enthalten "Komponente" - Vorlagen):

    var oStyle = $("<style />");

oStyle.append("@import url(" + sTemplateCssUrl + ");");
oStyle.attr("type", "text/css");

$(document.head).append(oStyle);

    Versuchte ich anfügen zu dokumentieren.Kopf mit einer one-line-Ansatz -- er arbeitete in IE 10 und Chrome, aber nicht in Safari. Der Ansatz oben gearbeitet in allen 3.

    InformationsquelleAutor Kirk B.
Schreibe einen Kommentar