Próbuję dynamicznie dodać regułę arkusza stylów CSS za pomocą javascript, coś jak przykład 2 here.Kiedy jest dodawany arkusz stylów do dokumentu.styleSheets
Działa przez większość czasu, ale wydaje się, że jest to sytuacja wyścigowa, która czasami kończy się niepowodzeniem w (przynajmniej) Chrome (15.0.874 i 17.0.933). Zdarza się to rzadko, gdy pamięć podręczna jest pusta (lub została wyczyszczona).
Oto, co udało mi się zawęzić. Najpierw ładuję zewnętrzny arkusz stylów, dołączając go do <head>, a następnie tworzę nowy arkusz stylów (gdzie będę dodawał reguły). Następnie wydrukuję długość document.styleSheets (natychmiast i po 1 sekundzie).
$(function() {
// it doesn't happen if this line is missing.
$("head").append('<link rel="stylesheet" type="text/css"'+
'href="/css/normalize.css" />');
var stylesheet = document.createElement("style");
stylesheet.setAttribute("type", "text/css");
document.getElementsByTagName('head')[0].appendChild(stylesheet);
var b = $('body');
b.append(document.styleSheets.length).append('<br/>');
setTimeout(function() {
b.append(document.styleSheets.length).append('<br/>');
}, 1000);
});
(grać z nim w http://jsfiddle.net/amirshim/gAYzY/13/)
gdy bufor jest jasne, że czasami drukuje 2 następnie 4 (jsfiddle dodaje swoje własne 2 pliki CSS), co oznacza, że nie dodaje ani stylu arkusze do document.styleSheets natychmiast ... ale prawdopodobnie czeka na załadowanie zewnętrznego pliku.
Czy to jest oczekiwane?
Jeśli tak, czy jest Example 2 on MDN (i wiele innych tam) zepsuty? Od linii 27:
var s = document.styleSheets[document.styleSheets.length - 1];
może oceniać z document.styleSheets.length == 0
Zauważ, że tak się nie stanie, kiedy nie wczytać zewnętrzny plik CSS pierwszy.
Chciałbym zapytać, jaki jest pożądany efekt końcowy. W jakich okolicznościach chciałbyś "wstrzyknąć" regułę do pliku css zamiast po prostu napisać ją w pliku css na pierwszym miejscu? – Sotkra
Również dynamicznie dodajem arkusz stylów ... ale dopiero po tym, jak $ (document) .ready został zwolniony ... –
@Kees: Kod, który podałem, robi wszystko w '$ (document) .ready'. To właśnie robi '$ (function() {...});'. – Amir