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

Question

Ich habe derzeit Probleme in Webkit (Safari und Chrome), wo ich versuche, dynamisch (innerHTML) einige HTML in ein Div zu laden, das HTML enthält CSS-Regeln (...), nachdem das HTML gerendert wird die Style-Definitionen nicht geladen sind (also visuell kann ich sagen, dass die Styles nicht da sind und auch wenn ich mit Javascript nach ihnen suche werden keine Styles gefunden). Ich habe versucht mit einem jquery-Plugin tocssRule(), es funktioniert, aber es ist einfach zu langsam. Gibt es eine andere Möglichkeit, Webkit dazu zu bringen, die Stile dynamisch zu laden? Danke. Patrick

Answer 1

Ich denke, es ist eine bessere Praxis, ein "Link" -Tag an den Kopf Ihres Dokuments anzuhängen. Wenn das nicht möglich ist, versuchen Sie, ein "style" -Tag an den Kopf anzuhängen. Style-Tags sollten nicht im Body sein (Validiert nicht).

anhängen 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); 

Anfügen Stil tag:

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

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

document.head.appendChild(style); 

Answer 2

Dank Vatos, Sie gab mir einen guten Vorsprung, im Grunde tat ich, was Sie vorgeschlagen, aber verwendet Jquery die HTML zu setzen und Hängen Sie den neuen Stil an den Kopf an, da Safari/Chrome beim Ausführen von innerHTML stehen bleiben würde und document.head nicht definiert ist. Mein Code ended suchen, wie dieses

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

Answer 3

Hier ist der Gig. Was Patrick gesagt hat, funktionierte nicht für mich. Hier ist, wie ich es gemacht habe.

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 für so etwas verwendet werden. Außerdem ist es auch langsamer.

Answer 4

einfachste Art und Weise (mit jQuery, das ist) ist die folgende:

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

Wenn Sie es auf diese Weise tun, dann wird es in Safari arbeiten. Wenn Sie den normalen jQuery-Weg (alles in einer Textzeichenfolge) machen, wird es fehlschlagen (das CSS wird nicht geladen).

Dann hängen Sie es einfach an den Kopf mit $ ('Kopf'). Append (cssLink);

Answer 5

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

Von 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 auch die Injektion von JS, die ignoriert werden kann wenn Sie nur eine CSS-Referenz einfügen möchten.

Answer 6

meh. Ich habe nicht genug Punkte, um Andrei Cimpocas Ergebnis zu bestätigen, aber diese Lösung ist die beste.

style.innerHTML = "..."; funktioniert nicht in Webkit-Engines oder ie.

richtig CSS Text zu injizieren, müssen Sie:

style.styleSheet.cssText = "..."; für dh.

und

style.appendChild (Dokument.createTextNode ("...")); für Webkit.

Firefox funktioniert auch mit der zweiten Option oder mit style.innerHTML = "...";

Answer 7

Neben den Stil-Tag basierten Versionen oben können Sie auch Stile mit Javascript direkt hinzufügen:

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, ohne zu cssText/innerHTML- zurückgreifen zu müssen.

Beachten Sie, dass dies bei Webkit-basierten Browsern langsam sein kann, wenn Sie viele Regeln einfügen. Es ist ein Fehler zum Beheben dieses Leistungsproblems in Webkit (https://bugs.webkit.org/show_bug.cgi?id=36303) geöffnet. Bis dahin können Sie Style-Tags für Masseneinfügungen verwenden.

Dies ist die W3C-Standard Art und Weise Stilregeln des Einsetzens, aber es ist nicht von einem beliebigen Version von IE unterstützt: http://www.quirksmode.org/dom/w3c_css.html

Answer 8

Ich weiß, es ist ein älteres Thema, aber dachte, jemand profitieren würde. Auch ich brauchte CSS dynamisch in meine Seite zu laden (vor allem gemacht onload, nach enthalten „Komponente“ Vorlagen):

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

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

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

Ich habe versucht, Anfügen mit einem einzeiligen Ansatz document.head - arbeitete in IE 10 und Chrome, aber nicht in Safari. Der obige Ansatz funktionierte in allen 3.