javascript - 处理 document.styleSheets 时未定义 rule.style

Question

请记住，我仍在学习 JavaScript，所以请多关照。

我有以下代码在网页中搜索任何包含 HTTP url 的 CSS。但是，有一个变量“v”有时可能是未定义的。错误“rule.style 未定义”

如何解决这个未定义的响应？我尝试使用条件但没有成功。

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] 行，因为您无法查找非对象的属性(未定义[s]).

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

rule 是什么对象？这是一个CSSRule . (您可以在 MDN 上查找 document.styleSheets 自己弄清楚，或者只是在错误前放置一个 console.log(rule)，或者学习使用您的浏览器的 devtools 调试器)。

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

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

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