Jak ładować reguły CSS dynamicznie w Webkit (Safari/Chrome)?

Question

Mam obecnie problemy w Webkit (Safari i Chrome), czy staram się ładować dynamicznie (innerHTML) jakiś html do div, html zawiera reguły css (...), po tym jak HTML zostanie wyrenderowany, definicje stylów nie są ładowane (więc wizualnie mogę powiedzieć, że stylów nie ma, a także jeśli szukam z javascript dla nich nie znaleziono stylów). Próbowałem używać wtyczki jquery tocssRule(), działa, ale jest zbyt wolny. Czy istnieje inny sposób na dynamiczne ładowanie stylów przez webkit? Dzięki. Patrick

Answer 1

Uważam, że lepszą praktyką jest dołączanie znacznika "link" do nagłówka dokumentu. Jeśli nie jest to możliwe, spróbuj dodać tag "styl" do głowy. Tagi stylu nie powinny znajdować się w ciele (nawet nie sprawdzają poprawności).

Dołącz 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); 

tag styl Dołącz:

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

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

document.head.appendChild(style); 

Answer 2

Dzięki Vatos, dałeś mi dobre prowadzenie na zasadzie zrobiłem to, co sugeruje, ale używane jquery ustawić html i dopisz nowy styl do głowy, ponieważ Safari/chrome zatrzyma się, gdy wykonywanie innerHTML i document.head będzie niezdefiniowane. Mój kod zakończony patrząc jak ten

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

Answer 3

Oto gig. To, co powiedział Patrick, dla mnie nie zadziałało. Oto jak to zrobiłem.

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 jest przestarzałe i nie należy go używać do takich celów. Co więcej, jest wolniejszy.

Answer 4

najprostszy sposób (przy użyciu jQuery to jest) jest następujący:

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

jeśli robisz to w ten sposób to będzie działać w Safari. Jeśli zrobisz to normalny sposób jQuery (wszystko w jednym ciągu tekstowym) to się nie powiedzie (css nie załaduje się).

Następnie wystarczy dołączyć ją do głowy za pomocą $ ("głowa") .endend (cssLink);

Answer 5

Prosto-up jQuery sposób (który działa na głównych przeglądarek - w tym Chrome): http://topsecretproject.finitestatemachine.com/2009/09/how-to-load-javascript-and-css-dynamically-with-jquery/

Z witryny:

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

Uwaga: Przykład obejmuje również wtrysk JS, które można zignorować jeśli chcesz tylko wstrzyknąć referencję CSS.

Answer 6

meh. Nie mam wystarczająco dużo punktów, aby głosować na wynik Andrei Cimpoca, ale to rozwiązanie jest najlepsze tutaj.

style.innerHTML = "..."; nie działa w silnikach webkitowych lub np.

Aby poprawnie wprowadzić tekst CSS, musisz:

style.styleSheet.cssText = "..."; dla np.

i

style.appendChild (dokument.createTextNode ("...")); dla webkita.

Firefox działa również z drugą opcją lub z style.innerHTML = "...";

Answer 7

Oprócz powyższych wersjach opartych tag styl, można również dodać style używając bezpośrednio javascript:

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

Ma to tę zaletę, że jest w stanie używać zmiennych bez konieczności uciekania się do parametr CSSText/innerHTML.

Należy pamiętać, że w przeglądarkach opartych na webkitach może to być powolne, jeśli wstawiasz wiele reguł. Występuje błąd, który rozwiązuje problem z wydajnością w pakiecie webkit (https://bugs.webkit.org/show_bug.cgi?id=36303). Do tego czasu możesz używać znaczników stylu dla insertów zbiorczych.

To W3C standardowy sposób wstawienie reguły stylów, ale to nie jest poparte żadnym wersji IE: http://www.quirksmode.org/dom/w3c_css.html

Answer 8

wiem, że to starszy temat, ale że ktoś skorzysta. Ja też potrzebne, aby załadować css dynamicznie na mojej stronie (przed wszystko renderowane onload, zgodnie z zawartymi „część” szablonów):

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

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

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

Próbowałem dołączanie do document.head z podejściem jednej linii - pracowała w IE 10 i Chrome, ale nie w Safari. Powyższe podejście zadziałało we wszystkich 3.