Come caricare dinamicamente le regole CSS in Webkit (Safari/Chrome)?

Question

Attualmente ho problemi con Webkit (Safari e Chrome) quando provo a caricare dinamicamente (innerHTML) alcuni html in un div, l'html contiene le regole css (...), dopo che il codice HTML viene reso le definizioni di stile non vengono caricate (così visivamente posso dire che gli stili non ci sono e anche se cerco con javascript per loro non vengono trovati stili). Ho provato a utilizzare un plugin jquery tocssRule(), funziona ma è troppo lento. C'è un altro modo per far sì che il webkit carichi gli stili in modo dinamico? Grazie. Patrick

Answer 1

Penso che sia una buona pratica aggiungere un tag "link" all'inizio del documento. Se ciò non è possibile, prova ad aggiungere un tag "stile" alla testa. I tag di stile non dovrebbero essere nel corpo (non convalidare nemmeno).

Append collegamento 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 stile Append:

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

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

document.head.appendChild(style); 

Answer 2

Grazie Vatos, mi hai dato un buon vantaggio, in fondo ho fatto quello che lei ha suggerito, ma usato jQuery per impostare l'html e aggiungi il nuovo stile alla testa poiché, safari/chrome si bloccherebbe durante l'esecuzione di innerHTML e document.head non era definito. Il mio codice è conclusa cercando in questo

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

Answer 3

Ecco il concerto. Quello che Patrick ha detto non ha funzionato per me. Ecco come l'ho fatto.

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 è deprecato e non deve essere utilizzato per una cosa del genere. Inoltre è anche più lento.

Answer 4

modo più semplice (utilizzando jQuery che è) è la seguente:

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

Se lo si fa in questo modo allora funzionerà in Safari. Se lo fai il normale modo jQuery (tutto in una stringa di testo) fallirà (il css non verrà caricato).

Quindi basta aggiungerlo alla testa con $ ('testa'). Append (cssLink);

Answer 5

Straight-up modo jQuery (che funziona sui principali browser - tra cui Chrome): http://topsecretproject.finitestatemachine.com/2009/09/how-to-load-javascript-and-css-dynamically-with-jquery/

Dal sito:

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

Nota: l'esempio include anche l'iniezione di JS, che può essere ignorato se si desidera semplicemente inserire un riferimento CSS.

Answer 6

meh. Non ho abbastanza punti per votare il risultato di Andrei Cimpoca, ma quella soluzione è la migliore qui.

style.innerHTML = "..."; non funziona nei motori webkit o ie.

per iniettare correttamente il testo css, è necessario:

style.styleSheet.cssText = "..."; per esempio.

e

style.appendChild (documento.createTextNode ("...")); per webkit.

Firefox funzionerà anche con la seconda opzione, o con style.innerHTML = "...";

Answer 7

Oltre alle versioni tag di stile basati sopra, si può anche aggiungere stili utilizzando direttamente javascript:

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

Questo ha il vantaggio di essere in grado di utilizzare le variabili, senza dover ricorrere a cssText/innerHTML.

Ricordare che nei browser basati su webkit questo può essere lento se si inseriscono molte regole. C'è un bug aperto per risolvere questo problema di prestazioni nel webkit (https://bugs.webkit.org/show_bug.cgi?id=36303). Fino ad allora, puoi utilizzare i tag di stile per gli inserimenti collettivi.

Questo è il modo standard W3C di inserire regole di stile, ma non è supportato da qualsiasi versione di IE: http://www.quirksmode.org/dom/w3c_css.html

Answer 8

So che è un argomento vecchio, ma pensato che qualcuno trarrebbe beneficio. Anche Avevo bisogno di caricare i CSS in modo dinamico nella mia pagina (prima di tutto reso onload, secondo modelli "componenti" inclusi):

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

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

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

Ho provato aggiungendo ad document.head con un approccio one-line - ha lavorato in IE 10 e Chrome, ma non in Safari. L'approccio sopra ha funzionato in tutto 3.