使用 $.each() 遍历 document.styleSheets 时出现无效的过程调用或参数 IE 问题

Question

我编写了这段代码，它遍历所有全局样式表规则并将它们存储在一个数组/对象中。我稍后会使用这个类似字典的对象来更改全局规则，而不是在单个元素上设置样式。

以下代码在 IE8 中中断，但在 Firefox3.7 和 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;
        });
    });
});

我收到Invalid procedure call or argument 错误。当我尝试调试它时，这段代码成功地迭代了两个带有规则的 CSS 样式表文件，但是当第二个迭代完成时，它失败了。

我似乎在这段代码中找不到错误。

Answer 1

代码正确的是：

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);
    }
});

Answer 2

问题

经过彻底的测试，我发现document.styleSheets 不是IE 中的常规数组。这就是为什么它在到达结尾时中断$.each() 调用。

如果我们看一下 jQuery 函数本身，它有一个 for 循环来迭代具有 length 属性的对象，错误地认为它是一个数组。 document.styleSheets 确实有 length 属性，但它显然不是一个数组。所以当$.each()中的这个for循环被执行时：

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

在最后一个元素被迭代后失败。正如我们可能看到的，这个for 循环不会自行增加i，而是在为value 分配新值时增加它。

我们也可以手动检查。在任意浏览器的地址栏中写下这两行：

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

第一个在所有浏览器中运行良好，但第二个在 IE 中失败。

解决方案

我们必须重写样式表的迭代

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;
        });
    }
});

Answer 3

会不会是解析规则本身失败了？尝试使用不同的样式表并重新排序规则，以确保解析规则不会因某种原因出现问题。