rule.style не определен при обработке document.styleSheets

Question

Пожалуйста, помните, что я все еще изучаю JavaScript, так что будьте добры, пожалуйста.

У меня есть следующий код, который ищет на веб-странице любой CSS, содержащий URL-адреса HTTP. Однако есть одна переменная "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 не определен", ваша ошибка, вероятно, происходит на v = rule.style[s] линии, потому что вы не можете искать свойства не-объектов (undefined[s]).

когда rule.style не определено? Когда rule объект не имеет style имущество.

Что это за объект rule? Это CSSRule, (Вы могли бы посмотреть вверх document.styleSheets на MDN, чтобы понять это самостоятельно или просто положить 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 правила проверки стилей, определенных внутри них. Это определенно выходит за рамки этого ответа, хотя.