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

Question

如何检查document.styleSheets [i] object中是否存在属性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

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

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

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

我认为检测它的唯一方法是使用try语句：

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

Answer 2

sheet instanceof CSSStyleSheet或("cssRules" in sheet)

  

的SecurityError

这可能是SOP违规，具体取决于您获取节点和文档对象的位置

CSSOM规范说

  

如果未设置origin-clean标志，则抛出SecurityError异常。

仅在CORS标头或SOP允许的情况下设置。