rule.style is undefined when processing document.styleSheets

Question

Please bare in mind that I am still learning JavaScript so be kind please.

I have the following code which searches a webpage for any CSS containing HTTP urls. However, there is one variable "v" which can sometimes be undefined. Error "rule.style is undefined"

How can I resolve this undefined response? I have tried to use conditions but with no luck.

var seachHttp = function () {
    var cssSheets = document.styleSheets, // Loaded CSS Sheets
        i =0, il = cssSheets.length, // Counter and limit for sheets
        j, jl, rules, rule, // Counter and vars for Rules inside a Sheet
        stylesToSearch = [ // Properties to Seach HTTP ON
            'background',
            'background-image',
        ],
        k, kl=stylesToSearch.length, // Counter for properties
        s, // Current Property
        v;  // Current Value
    for(;i<il;i++) { // Loop Sheets
        rules = cssSheets[i].rules || cssSheets[i].cssRules;
        for(j=0,jl=rules.length;j<jl;j++) { // Loop Rules
            rule = rules[j];
            for(k=0;k<kl;k++){ // Loop Styles
                s = stylesToSearch[k]; 
                v = rule.style[s]; // Get Value from Current Style
                if ( typeof v !== undefined && v.toString().toLowerCase().indexOf("http") > -1 ) { // Seach for HTTP Content
                    alert("Found HTTP at " + rule.selectorText + " " + s + " = " + rule.style[s]);
                    return true;

                }
            }
        }
    }
    return false;
}

I call this function using:

var cssresult = seachHttp();
if (cssresult == true && cssresult !== undefined) {
//code here
}

@BarryMcDaid1982 - as best I can tell, this is a script for searching through the CSS style rules in the current web page and this has nothing to do with Ajax or any external server. — jfriend00, Aug 10 '15 at 22:55
You said it yourself "rule.style is undefined", not `v`. Your error probably happens on the `v = rule.style[s]` line because you can't look up properties on non-objects (`undefined[s]`). — Nickolay, Aug 10 '15 at 23:10
@Nickolay That makes sense. What would be the best workaround? Sorry I'm just stumped on this one — DaE, Aug 10 '15 at 23:20
If I add if (typeof v === "undefined" || v === "") { return false; } then the result of the function is always false? — DaE, Aug 10 '15 at 23:31
A side note: consider using longer, descriptive variable names when developing rather than single letters (unless it's an iterator like `i`, and even then it's better to be clear especially with multiple loops). It makes it easier to read, debug, and you can always minify/uglify for production. — Jesse Kernaghan, Aug 10 '15 at 23:34

score 1 · Answer 1 · answered Aug 10 '15 at 23:42

Since the error says "rule.style is undefined", your error probably happens on the v = rule.style[s] line because you can't look up properties on non-objects (undefined[s]).

When rule.style is undefined? When a rule object doesn't have a style property.

What kind of object is rule? It's a CSSRule. (You could've looked up document.styleSheets on MDN to figure it out yourself or just put a console.log(rule) before the error, or learn to use your browser's devtools debugger).

As you can see from the MDN page, a generic CSSRule doesn't have a style property, only a certain type - CSSStyleRule - does. That's because apart from style rules (i.e. selector { background: ... }), a CSS stylesheet can contain other constructs, e.g. @media screen { ... }, which itself obviously doesn't have any properties (like background).

What you should do depends on what your goal is:

The simplest solution would be to limit this code to CSSStyleRules and check if (rule instanceof CSSStyleRule) or rule.type == CSSRule.STYLE_RULE (I'm assuming a standards-compliant browser here of course).
If you wished, you could process the other types of rules, e.g. recurse into the @media rules to check the styles defined inside them. This is definitely out of scope for this answer, though.

rule.style is undefined when processing document.styleSheets

1 Answers1