如何通过 JavaScript 获取页面样式表列表

JavaScript 中可通过 document.styleSheets 获取页面所有样式表，返回按文档顺序排列的 StyleSheetList；包含 link、style 及动态插入的样式表，但跨域样式表的 cssRules 可能受限；其 CSSStyleSheet 对象提供 href、title、disabled、ownerNode 和 cssRules 等属性，支持遍历、识别与动态启用/禁用。

javascript 中可以通过 document.stylesheets 获取页面中所有样式表的列表，它返回一个 cssstylesheet 对象的类数组（stylesheetlist），包含 link 标签引入的外部样式表、style 标签定义的内联样式表，以及由 javascript 动态插入的样式表。

获取所有样式表的基本方法

document.styleSheets 是只读属性，直接访问即可：

• 它按文档中出现顺序排列，包括 <link rel="stylesheet"> 和 <style> 元素对应的样式表
• 跨域的外部样式表（如 CDN 引入）可能因 CORS 限制导致部分属性不可读（例如 cssRules 会抛出安全错误）
• 动态创建并插入的 <style> 或 <link>，只要已加入 DOM，也会出现在该列表中

遍历并检查样式表信息

每个 CSSStyleSheet 对象包含有用属性，可用于识别和调试：

• href：外部样式表的 URL；内联样式表为 null
• title：对应 <link> 或 <style> 的 title 属性（常用于首选样式表切换）
• disabled：布尔值，表示该样式表当前是否被禁用
• ownerNode：指向对应的 DOM 节点（<link> 或 <style>）
• cssRules（或 rules）：该样式表中实际的 CSS 规则列表（需注意跨域限制）

示例：

for (let i = 0; i < document.styleSheets.length; i++) {  const sheet = document.styleSheets[i];  console.log({    index: i,    href: sheet.href,    title: sheet.title,    disabled: sheet.disabled,    owner: sheet.ownerNode.tagName  });}

安全读取 cssRules 的注意事项

直接访问 sheet.cssRules 可能触发 SecurityError（尤其对跨域 <link>）：

立即学习“Java免费学习笔记（深入）”；

• 可用 try...catch 包裹读取逻辑
• 也可先检查 sheet.href 是否为同源 URL，再尝试读取规则
• 某些浏览器（如旧版 IE）使用 sheet.rules，可用 sheet.cssRules || sheet.rules 兼容

安全读取示例：

function getRules(sheet) {  try {    return sheet.cssRules || sheet.rules;  } catch (e) {    return null; // 跨域或权限不足时返回 null  }}

筛选特定样式表（如带 title 的）

若页面使用 alternate 样式表或主题切换机制，可通过 title 精准定位：

• Array.from(document.styleSheets).filter(s => s.title === 'dark-theme')
• 配合 disabled 属性可判断当前激活的主题
• 修改 disabled 值可动态启用/禁用某样式表（不影响 DOM 结构）

启用指定样式表：

const darkSheet = Array.from(document.styleSheets)  .find(s => s.title === 'dark-theme');if (darkSheet) darkSheet.disabled = false;