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;
