Question

我想循环遍历文档样式表并循环遍历每个样式表的规则。

我正在做以下事情：

var sheets = typeof sheet !== "undefined" ? [sheet] : document.styleSheets;
for (var i = 0, l = sheets.length; i < l; i++) {
    sheet = sheets[i];
    if (typeof sheet.cssRules === 'undefined' || !sheet.cssRules) {
        continue;
    }
    for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
        var rule = sheet.cssRules[j];

        //some code
    }
}

问题是其中一个文档样式表是从Google Maps API动态加载的。因此，以下行失败并给出跨域安全性错误，指出cssRules不是可读属性：

if (typeof sheet.cssRules === "undefined" || !sheet.cssRules) {

有没有办法检查cssRules是否可读？我只是想跳过错误并继续下一个样式表。

这在Opera 12.17和Firefox（开发人员版）

中失败了

Answer 1

你可以这样做：

var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var x = 0; x < classes.length; x++) {

    }

Answer 2

我找到了一个有效的解决方案。我刚刚使用了try catch块。

以下代码有效：

var sheets = typeof sheet !== "undefined" ? [sheet] : document.styleSheets;
for (var i = 0, l = sheets.length; i < l; i++) {
    sheet = sheets[i];
    try {
        if (typeof sheet.cssRules === "undefined" || !sheet.cssRules) {
            continue;
        }
    }
    catch (err) {
        continue;
    }
    for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
        var rule = sheet.cssRules[j];

        //some code
    }
}

这样，在Opera中没有错误，并且在Firefox中捕获了异常，因此脚本不会停止运行。

Answer 3

如果您想通过避免其他域样式表来避免交叉浏览问题。您可以根据自己的要求添加以下条件。

            // get current site url
            function get_hostname(url) {
            var m = url.match(/^http:\/\/[^/]+/);
            return m ? m[0] : null;
            }

            // your stylesheet loop add one more condition in if statement. 
            var sheets = typeof sheet !== "undefined" ? [sheet] : document.styleSheets;
            for (var i = 0, l = sheets.length; i < l; i++) {
            sheet = sheets[i];
            if (typeof sheet.cssRules === 'undefined' || !sheet.cssRules || location.origin != get_hostname(sheet.href)) {
            continue;
            }
            for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
            var rule = sheet.cssRules[j];
            //some code
            }
            }

如何检查变量或属性在JavaScript中是否可读？

3 个答案: