Comment charger des règles css de manière dynamique dans Webkit (Safari / Chrome)?

Question

J'ai actuellement des problèmes avec Webkit (Safari et Chrome) dans lesquels j'essaie de charger dynamiquement (innerHTML) du code HTML dans un div. Le code HTML contient les règles CSS (...). Une fois que le code HTML est restitué, les définitions de style ne sont pas chargé (donc visuellement je peux dire que les styles ne sont pas là et aussi si je cherche avec javascript, aucun style n’est trouvé). J'ai essayé d'utiliser un plugin jQuery tocssRule (), cela fonctionne mais c'est trop lent. Existe-t-il un autre moyen d'obtenir Webkit pour charger les styles de manière dynamique? Merci. Patrick

Answer 1

Je pense que c'est une meilleure pratique d'ajouter un " lien " tag à la tête de votre document. Si cela n’est pas possible, essayez d’ajouter un & Quot; style & Quot; tag à la tête. Les balises de style ne doivent pas figurer dans le corps (ne sont même pas validées).

Ajouter une balise de lien:

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

link.setAttribute('rel', 'stylesheet');

link.type = 'text/css';

link.href = 'http://example.com/stylesheet.css';

document.head.appendChild(link);

Ajouter une balise de style:

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

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

document.head.appendChild(style);

Answer 2

Méthode jQuery directe (qui fonctionne sur les principaux navigateurs, y compris Chrome): http://topsecretproject.finitestatemachine.com/2009/09/how-to-load-javascript-and-css-dynamically-with-jquery/

Depuis le site:

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

Remarque: l'exemple comprend également l'injection de JS, qui peut être ignorée si vous souhaitez simplement injecter une référence CSS.

Answer 3

La manière la plus simple (en utilisant jQuery) 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, cela fonctionnera dans Safari. Si vous le faites de la manière jQuery normale (le tout dans une chaîne de texte), cela échouera (le css ne se chargera pas).

Ensuite, il vous suffit de l'ajouter à la tête avec $ ('tête'). append (cssLink);

Answer 4

Merci, Vatos, vous m'avez donné une bonne longueur d'avance. En gros, j'ai suivi ce que vous aviez suggéré, mais jQuery a été utilisé pour définir le code HTML et ajouter le nouveau style à la tête. . Mon code a fini comme ça

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

Answer 5

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 c.-à-d.

Pour injecter correctement le texte css, vous devez:

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

et

style.appendChild (document.createTextNode (" ... "))); pour le kit Web.

Firefox fonctionnera également avec la deuxième option ou avec style.innerHTML = & "; ... &" ;;;;

.

Answer 6

Voici 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. En outre, il est également plus lent.

Answer 7

Outre les versions basées sur les balises de style ci-dessus, vous pouvez également ajouter des styles à l'aide de javascript directement:

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

Cela présente l’avantage de pouvoir utiliser des variables sans avoir à recourir à cssText / innerHTML.

N'oubliez pas que sur les navigateurs Webkit, cela peut être lent si vous insérez beaucoup de règles. Un bogue est en cours pour résoudre ce problème de performances dans Webkit ( https: //bugs.webkit .org / show_bug.cgi? id = 36303 ). Jusque-là, vous pouvez utiliser des balises de style pour les insertions en vrac.

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

Answer 8

Je sais que c'est un sujet plus ancien, mais je pensais que quelqu'un en profiterait. Moi aussi, j'avais besoin de charger dynamiquement css dans ma page (avant que tout ne soit rendu, selon les & Quot; composants & "; Modèles inclus):

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

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

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

J’ai essayé d’ajouter à document.head avec une approche d’une seule ligne - je travaillais dans IE 10 et Chrome, mais pas dans Safari. L’approche ci-dessus a fonctionné dans les trois.