Question

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

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

如何解决此未定义的响应？我试过使用条件，但没有运气。

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

由于错误说＆＃34; rule.style未定义＆＃34;，您的错误可能发生在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）。

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

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

处理document.styleSheets时，rule.style未定义

1 个答案: