Comment puis-je charger des règles css dynamiquement dans Webkit (Safari/Chrome)?

J'ai actuellement des problèmes dans Webkit(Safari et Chrome) ont été j'essaie de charger dynamiquement (innerHTML) html dans un div, le html contient des règles css (...), après que le html est rendu les définitions de style ne sont pas chargés (si visuellement je peux dire que les styles ne sont pas là, et aussi si je recherche avec javascript pour eux pas de styles sont présents.
J'ai essayé d'utiliser un plugin jquery tocssRule(), ça fonctionne, mais il est tout simplement trop lent. Est-il une autre façon de se webkit pour charger les styles de façon dynamique?
Merci.
Patrick

OriginalL'auteur | 2008-12-09

  1. 8

    Je pense qu'il est préférable d'ajouter un "lien" de la balise à la tête de votre document. Si ce n'est pas possible, essayez d'ajouter une étiquette "style" de la tête. Les balises de Style ne devrait pas être dans le corps (qui N'a même pas de valider).

    Ajout de la balise 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 le style de la balise:

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

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

document.head.appendChild(style);
    innerHTML est une méthode dépréciée et ne doit pas être utilisé à tous.
    vous êtes dans l'erreur.
    hmm oui, je ne sais même pas pourquoi j'ai écrit ça. Je ne me souviens pas de ce que je pensais quand je l'ai écrit.

    OriginalL'auteur I.devries

  2. 4

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

    À partir du site:

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

    Remarque: l'exemple comprend l'injection de JS, ce qui peut être ignoré si vous voulez juste pour injecter un CSS de référence.

    OriginalL'auteur jeffreypriebe

  3. 2

    façon la plus simple (à l'aide de 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 sera de travailler dans Safari. Si vous le faites de la normale jQuery manière (toutes dans une chaîne de texte) ce sera un échec (le css ne se charge pas).

    Alors vous suffit de l'ajouter à la tête avec $('head').append(cssLink);

    OriginalL'auteur

  4. 1

    Grâce Vatos, vous m'avez donné une bonne longueur d'avance, en gros j'ai fait ce que vous avez suggéré, mais utilisé jquery pour définir le html et ajouter le nouveau style de la tête depuis, safari/chrome serait de décrochage lors innerHTML et document.la tête a été défini. Mon code clos ressembler à ce

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

    OriginalL'auteur

  5. 1

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

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

    Correctement injecter css texte, vous devez:

    style.la feuille de style.cssText = "..."; pour ie.

    et

    style.appendChild(document.createTextNode("...")); pour webkit.

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

    OriginalL'auteur Doug

  6. 1

    Voici le concert. Ce que Patrick a dit n'a pas de travail 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 doit pas être utilisé pour une telle chose. En outre, il est aussi plus lente.

    OriginalL'auteur

  7. 0

    En plus de l'étiquette de style en fonction des versions 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 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 un grand nombre de règles. Il y a un bug ouvert à résoudre ce problème de performances dans webkit (https://bugs.webkit.org/show_bug.cgi?id=36303). D'ici là, vous pouvez utiliser les balises de style pour des insertions.

    C'est le standard du W3C moyen de l'insertion de règles de style, mais il n'est pas pris en charge par toutes les versions de IE: http://www.quirksmode.org/dom/w3c_css.html

    document.querySelector('#x').style.sheet est pas défini.

    OriginalL'auteur tstanis

  8. 0

    Je sais que c'est un vieux sujet, mais pensé que quelqu'un serait bénéfique. J'ai trop besoin de charger css dynamiquement dans ma page (avant tout rendu onload, selon inclus "composant" modèles):

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

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

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

    J'ai essayé l'ajout de document.tête avec une ligne d'approche -- travaillé dans IE 10 et Chrome, mais pas dans Safari. L'approche ci-dessus a travaillé dans tous les 3.

    OriginalL'auteur Kirk B.