0

I want to loop through the document stylesheets and loop through the rules of each stylesheet.

I'm doing the following:

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

The problem is that one of the document stylesheets is loaded dynamically from Google Maps API. So the following line fails and gives a cross domain security error, stating that cssRules is not a readable property:

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

Is there a way to check if cssRules is readable? I just want to skip the error and continue to the next stylesheet.

This is failing in Opera 12.17 and Firefox (developer edition)

3 Answers 3

0

You can do like:

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

    }
1
  • Thanks. But the problem is not wether it is accessing cssRules or just rules. It is trying to access the cssRules property. This is throwing a network security exception. Apr 23, 2015 at 12:20
0

I found a working solution. I just used a try catch block.

So the following code works:

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

This way, in Opera there are no errors, and in Firefox the exception is catched, so the script does not stop running.

0

If you want to avoid cross browsing issue by avoiding other domain stylesheet. you can add the following condition as per your requirement.

            // 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
            }
            }
1
  • This will still fail because sheet.cssRules will still be evaluated, but it is easy to fix. Just move: location.origin != get_hostname(sheet.href) so that it is the first expression of the condition. That way if it is false the condition will not try to evaluate the following expressions. Thanks for this solution, will upvote when corrected :-) Apr 23, 2015 at 12:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.