javascript - 如何检查 document.styleSheets[i] 对象中是否存在属性 cssRules？

Question

如何检查 document.styleSheets[i] 对象中是否存在属性 cssRules？

我发现我无法使用

if ( sheets[i].hasOwnProperty("cssRules") )
  because .cssRules is inherited property.

但是当我尝试使用时

if( sheets[i].cssRules !== undefined )

所以在调试器(Firefox 48 Toolbox 工具)中我得到了异常:SecurityError。

由于这个原因，代码失败。

var cssList = function(node) {
    var sheets = document.styleSheets, o = {};
    var sheet;
    for (var i in sheets) {
      if( sheets[i].cssRules !== undefined )
        sheet = sheets[i].cssRules;
      else
      if( sheets[i].rules !== undefined )
        sheet = sheets[i].rules;
      else
        continue;

      var rules = sheets[i].rules || sheets[i].cssRules;
    }
    return o;
}

Answer 1

您可以在sheets[i]中使用'cssRules'来检测sheets[i]是否具有cssRules属性。

但是，所有样式表都应具有 cssRules 属性，然后您将始终获得 true。

您的问题是 cssRules getter 出于安全原因抛出错误。

我认为检测这一点的唯一方法是使用 try 语句:

try {
  var rules = sheets[i].cssRules;
} catch(err) {}
if(rules) // ...