2

私はまだJavaScriptを学んでいるので、親切にしてください。

HTTP URL を含む CSS を Web ページで検索する次のコードがあります。ただし、未定義の場合がある変数 "v" が 1 つあります。エラー「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
}
4

1 に答える 1

1

「rule.style is undefined」というエラーが表示されるv = rule.style[s]ため、非オブジェクト (undefined[s]) のプロパティを検索できないため、エラーはおそらくその行で発生します。

いつrule.style未定義ですか？オブジェクトにプロパティruleがない場合。style

とはどのような物体ruleですか？それはCSSRuleです。( document.styleSheetsMDN を調べて自分で調べたりconsole.log(rule)、エラーの前に a を付けたり、ブラウザーの devtools デバッガーの使い方を学んだりできます)。

MDN ページからわかるように、ジェネリックCSSRuleにはstyleプロパティがなく、特定のタイプだけにプロパティがCSSStyleRuleあります。これは、スタイル ルール(つまり)とは別にselector { background: ... }、CSS スタイルシートには他の構成要素@media screen { ... }( などbackground) を含めることができるためです。

何をすべきかは、目標が何であるかによって異なります。

  • 最も簡単な解決策は、このコードを CSSStyleRules に制限して or をチェックするif (rule instanceof CSSStyleRule)ことrule.type == CSSRule.STYLE_RULEです (もちろん、ここでは標準に準拠したブラウザーを想定しています)。
  • 必要に応じて、他のタイプのルールを処理することもできます。たとえば、ルールに再帰して、@mediaルール内で定義されているスタイルをチェックすることができます。ただし、これは間違いなくこの回答の範囲外です。
于 2015-08-10T23:42:06.197 に答える