规则.style在处理document.styleSheets时未定义

Question

请记住，我还在学习JavaScript，所以请友好。

我有以下的代码搜索任何包含HTTP url的CSS网页。然而，有一个变量"v"有时可能是未定义的。错误"的规则。" Style is undefined"

如何解决这个未定义的响应?我试过使用条件，但运气不好。

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

我使用:

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

Answer 1

由于错误提示"rule "。style is undefined"，你的错误可能发生在v = rule.style[s]行，因为你不能在非对象(undefined[s])上查找属性。

当rule.style未定义时?当rule对象没有style属性时。

rule是什么类型的对象?这是CSSRule。(你可以在MDN上查找document.styleSheets来自己弄清楚，或者在错误之前放一个console.log(rule)，或者学会使用浏览器的devtools调试器)。

从MDN页面可以看到，一个通用的CSSRule没有style属性，只有一个特定的类型——CSSStyleRule——有。这是因为除了样式规则(即selector { background: ... })， CSS样式表可以包含其他结构，例如@media screen { ... }，它本身显然没有任何属性(如background)。

你应该做什么取决于你的目标是什么:

最简单的解决方案是将此代码限制为cssstylerrules并检查if (rule instanceof CSSStyleRule)或rule.type == CSSRule.STYLE_RULE(当然，我假设这里是一个标准兼容的浏览器)。
• 如果你愿意，你可以处理其他类型的规则，例如递归到@media规则来检查其中定义的样式。但是，这绝对超出了这个答案的范围。