Comment charger dynamiquement des règles CSS dans Webkit (Safari/Chrome)?

Question

J'ai actuellement des problèmes dans Webkit (Safari et Chrome) si j'essaie de charger dynamiquement (innerHTML) du code html dans un div, le html contient des règles css (...), après que le html soit rendu les définitions de style ne sont pas chargées (si visuellement je peux dire les styles ne sont pas là et aussi si je recherche avec javascript pour eux aucun style n'est trouvé). J'ai essayé d'utiliser un plugin jquery tocssRule(), ça marche mais c'est trop lent. Existe-t-il une autre façon d'obtenir Webkit pour charger les styles dynamiquement? Merci. Patrick

Answer 1

Je pense qu'il est préférable d'ajouter une balise "link" à la tête de votre document. Si ce n'est pas possible, essayez d'ajouter une balise "style" à la tête. Les étiquettes de style ne doivent pas être dans le corps (ne valide même pas).

Append balise link:

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 style Append:

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

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

document.head.appendChild(style); 

Answer 2

Merci Vatos, vous m'a donné une bonne avance, au fond, je l'ai fait ce que vous avez proposé, mais utilisé jquery pour définir le code html et ajouter le nouveau style à la tête car, safari/chrome se bloquerait en faisant innerHTML et document.head n'était pas défini. Mon code qui ressemble à ceci clos le

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

Answer 3

est ici le concert. Ce que Patrick a dit n'a pas fonctionné pour moi. Voici comment je l'ai fait.

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 est obsolète et ne devrait pas être utilisé pour une telle chose. De plus, c'est plus lent aussi.

Answer 4

façon la plus simple (en utilisant jQuery qui est) est la suivante:

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

Si vous le faites de cette façon, alors il fonctionnera dans Safari. Si vous le faites de la manière normale de jQuery (tout dans une chaîne de texte), il échouera (le css ne se chargera pas). Puis vous venez de l'ajouter à la tête avec $ ('head'). Append (cssLink);

Answer 5

façon jQuery straight-up (qui fonctionne sur les principaux navigateurs - y compris Chrome): http://topsecretproject.finitestatemachine.com/2009/09/how-to-load-javascript-and-css-dynamically-with-jquery/

Sur le site:

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

Note: l'exemple comprend également l'injection de JS, qui peut être ignoré si vous voulez juste injecter une référence CSS.

Answer 6

meh. Je n'ai pas assez de points pour voter le résultat d'Andrei Cimpoca, mais cette solution est la meilleure ici.

style.innerHTML = "..."; ne fonctionne pas dans les moteurs de webkit ou ie.

Pour injecter correctement le texte css, vous devez:

style.styleSheet.cssText = "..."; pour ie.

et

style.appendChild (document.createTextNode ("...")); pour webkit. Firefox fonctionnera également avec la deuxième option, ou avec style.innerHTML = "...";

Answer 7

Outre les versions à base de balises de style ci-dessus, vous pouvez également ajouter des styles en utilisant javascript directement:

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

Ceci a l'avantage de pouvoir utiliser des variables sans avoir à recourir à cssText/innerHTML. Gardez à l'esprit que sur les navigateurs basés sur Webkit, cela peut être lent si vous insérez beaucoup de règles. Il y a un bogue ouvert pour résoudre ce problème de performance dans webkit (https://bugs.webkit.org/show_bug.cgi?id=36303). Jusque-là, vous pouvez utiliser des étiquettes de style pour les insertions en vrac.

C'est la méthode standard du W3C d'insérer des règles de style, mais il est étayée par aucune version de IE: http://www.quirksmode.org/dom/w3c_css.html

Answer 8

Je sais qu'il est un sujet plus âgé, mais je pensais que quelqu'un gagnerait. Moi aussi besoin de charger le fichier css dynamiquement dans ma page (avant tout onload rendu, selon les modèles inclus « composants »):

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

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

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

J'ai essayé de annexant document.head avec une approche d'une ligne - travaillé dans IE 10 et Chrome, mais pas dans Safari. L'approche ci-dessus a fonctionné dans tous les 3.