遍历CSSRuleList时报错“不可迭代”，该行为是否为预期？

这确实是个容易踩坑的点，答案是这种报错属于预期行为，背后主要有两个核心原因：

1. 同源策略的安全限制 #

浏览器出于安全考虑，会严格限制对跨域加载样式表的cssRules属性访问。如果你的页面引入了来自不同域名（比如第三方CDN、外部服务器）的样式表，当你尝试访问它的cssRules时，不仅会返回null，还可能抛出安全异常，此时自然无法进行迭代操作。

这种限制是浏览器的强制安全机制，目的是防止恶意脚本窃取其他域名下的样式规则信息。

2. CSSRuleList的迭代器实现存在兼容性差异 #

虽然CSS规范中明确规定CSSRuleList应该实现[Symbol.iterator]接口（理论上支持for...of迭代），但部分浏览器（尤其是旧版Chrome、Firefox或移动端浏览器）并没有完全遵循这个规范实现。即使你能成功访问到同域样式表的cssRules，直接用for...of循环也可能触发“not iterable”的错误。

解决方法 #

针对这两个问题，你可以这样处理代码：

for (const sheet of document.styleSheets) {
  try {
    // 尝试获取规则，捕获跨域异常
    const rules = sheet.cssRules;
    if (rules) {
      // 手动转换为数组，确保可迭代性
      const ruleArray = Array.from(rules);
      for (const rule of ruleArray) {
        console.log(rule.cssText);
      }
    }
  } catch (error) {
    console.warn(`无法访问样式表规则：${error.message}`);
  }
}

通过Array.from()或者展开运算符[...rules]把CSSRuleList转换为普通数组，就能稳定地进行迭代操作；同时用try/catch捕获跨域导致的访问异常，避免代码崩溃。

内容的提问来源于stack exchange，提问作者zenwaichi