document.stylesheets 返回 stylesheetlist 类数组对象，包含所有已加载样式表；但跨域外链样式表因安全限制无法访问 cssrules，需 try/catch 捕获 securityerror 并检查 sheet.cssrules 是否为 null 或 undefined。

document.styleSheets 确实能拿到页面中所有已加载的样式表对象，但它返回的是一个 CSSStyleSheetList（类数组），且存在跨域限制、动态插入顺序、disabled 状态干扰等实际问题——不是所有 <link> 或 <style></style> 都能无条件访问到。

为什么有些样式表在 document.styleSheets 里但拿不到 cssRules

常见于以下情况：

• 外链样式表（<link rel="stylesheet" href="xxx.css">）若跨域且服务端未设置 Access-Control-Allow-Origin，则 sheet.cssRules 会抛出 SecurityError，只能读 sheet.href 和 sheet.disabled
• 内联 <style></style> 或 JS 动态创建的 CSSStyleSheet 一般可读，但若被设为 sheet.disabled = true，其 cssRules 仍存在，只是浏览器不应用
• 某些浏览器（如旧版 Safari）对 @import 嵌套的子表不纳入 document.styleSheets 列表

如何安全遍历并提取可用的 CSS 规则

不能直接循环 document.styleSheets[i].cssRules，必须加 try/catch + 权限检查：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

for (let i = 0; i  0) {
      console.log(`Sheet ${i}: ${sheet.href || 'inline'}`, rules);
    }
  } catch (e) {
    if (e.name === 'SecurityError') {
      console.warn(`Skipped cross-origin sheet:`, sheet.href);
    }
  }
}

document.styleSheets 的索引顺序和 DOM 插入顺序一致吗

基本一致，但要注意：

• HTML 解析顺序决定初始顺序：<link> 在前、<style></style> 在后 → styleSheets[0] 是第一个 <link>
• JS 动态插入的 <link> 或 <style></style> 会追加到末尾，但若用 insertBefore 插入到已有节点前，其对应 StyleSheet 不会自动重排索引 —— document.styleSheets 始终按「加载完成时间」排序，不是 DOM 位置
• 异步 <link rel="preload"> 不会出现在 document.styleSheets 中，直到真正被 rel="stylesheet" 激活

真正麻烦的是跨域样式表的静默失败：你看到它在列表里，却无法读规则，也收不到明确提示 —— 最好在 try 中检查 sheet.cssRules === null 或 undefined 作为 fallback 判断依据。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！