Invalid argument ou appel de procédure IE problème lors d'une itération dans le document.les feuilles de style en utilisant $.chacun()

J'ai écrit ce code qui effectue une itération sur toutes les feuille de style globale règles et les stocke dans un tableau/objet. J'utilise ce dictionnaire comme objet ultérieurement de modifier les règles globales plutôt que de fixer les styles sur les différents éléments.

Code suivant pauses dans IE8 mais qui fonctionne bien dans Firefox3.7 et Chrome4.

var allRules;

$(function() {
    var fileRules;
    allRules = [];
    $.each(document.styleSheets, function() {
        //get rules for any browser (IE uses rules array)
        fileRules = this.cssRules || this.rules;
        $.each(fileRules, function() {
            allRules[this.selectorText] = this;
        });
    });
});

- Je obtenir Invalid procedure call or argument erreur. Quand j'essaie de le corriger, ce code avec succès parcourt deux feuilles de style CSS fichiers avec des règles, mais lorsque la seconde de l'itération est fait, il échoue.

Je n'arrive pas à trouver une erreur dans ce code.

Puisque vous ne l'utilisez pas allRules comme un tableau, vous devez le déclarer comme un objet: allRules = {};
Bas: je l'ai essayé aussi, mais il ne fonctionne pas non plus.
Désolé, j'aurais dit qu'il ne serait pas résoudre quoi que ce soit. C'était juste un aparté.

OriginalL'auteur Robert Koritnik | 2010-02-18

  1. 13

    Le problème

    Après des tests approfondis, j'ai découvert que document.styleSheets n'est pas un réseau régulier dans IE. C'est pourquoi il se casse en $.each() appel lorsqu'il atteint la fin.

    Si nous prenons un coup d'oeil à la fonction jQuery lui-même, il a un for boucle d'itération sur un objet qui a une length propriété, faussement croire qu'il est un tableau. document.styleSheets n'ont length bien, mais ce n'est évidemment pas un tableau. Alors, quand cette for boucle dans $.each() est exécutée:

    for (var value = object[0];
     i < length && callback.call( value, i, value ) !== false;
     value = object[++i]){}

    il échoue après le dernier élément a été itéré. Comme nous pouvons le voir ce for boucle n'a pas d'incrément i sur son propre, mais plutôt l'incrémente, tout en affectant une nouvelle valeur à value.

    On peut vérifier cela à la main. Écrire ces deux lignes dans toute barre d'adresse du navigateur:

    javascript:var a=[1,2,3];alert(a[3]);void(0);
javascript:alert(document.styleSheets[document.styleSheets.length]);void(0);

    Le premier s'exécute correctement dans tous les navigateurs, mais le second ne parvient pas dans IE.

    La solution

    Nous devons réécrire l'itération sur les feuilles de style

    var allRules;

$(function() {
    var fileRules;
    allRules = {};
    //can't use $.each() over document.styleSheets because it's not an array in IE
    for (var i = 0; i < document.styleSheets.length; i++)
    {
        fileRules = document.styleSheets[i].cssRules || document.styleSheets[i].rules;
        $.each(fileRules, function() {
            allRules[this.selectorText] = this;
        });
    }
});
    Très bonne documentation du problème et la solution. +1
    J'ai pensé qu'il pourrait être utile à quelqu'un d'autre, si bien que je documentée de manière plus approfondie. Merci pour le upvote.

    OriginalL'auteur Robert Koritnik

  2. 0

    Pourrait-il que l'analyse de la règle elle-même est défectueux? Essayez d'expérimenter avec différentes feuilles de style et de réorganiser les règles pour s'assurer qu'il n'y a pas un problème de l'analyse de la règle pour une raison quelconque.

    mais je ne suis pas l'analyse de la règle en aucune façon, la forme ou la forme... je suis juste le stockage de leurs noms et de règles contre eux...

    OriginalL'auteur Dave Swersky

  3. -2

    code est vrai:

    var fileRules;
(function ($) {
    allRules = {};
    for (var i = 0; i < document.styleSheets.length; i++) {
        fileRules = document.styleSheets[i].cssRules || document.styleSheets[i].rules;
        $.each(fileRules, function () {
            allRules[this.selectorText] = this;
        })(jQuery);
    }
});
    Ce code ne fonctionne pas... Désolé. Vous êtes en train d'ajouter (jQuery) à $.each... Pourquoi avez-vous l'ajouter à la première place? Vous avez probablement voulu faire la fonction principale est immédiatement exécutable. Mais même si... Alors ce code doit s'exécuter la dernière dans le document. En utilisant une solution de l'approche par l'exécution de ce document à portée de main est beaucoup plus transparent. Tu ne crois pas?
    Ne pas mentionner le fait que vous avez fait allRules une fermeture variable, de sorte que vous ne serez pas en mesure d'accéder à ces règles que vous avez lu dans...

    OriginalL'auteur popo