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></style>元素对应的样式表 - 跨域的外部样式表（如 CDN 引入）可能因 CORS 限制导致部分属性不可读（例如
cssRules会抛出安全错误） - 动态创建并插入的
<style></style>或<link>，只要已加入 DOM，也会出现在该列表中
遍历并检查样式表信息
每个 CSSStyleSheet 对象包含有用属性，可用于识别和调试：
-
href：外部样式表的 URL；内联样式表为null -
title：对应<link>或<style></style>的title属性（常用于首选样式表切换） -
disabled：布尔值，表示该样式表当前是否被禁用 -
ownerNode：指向对应的 DOM 节点（<link>或<style></style>） -
cssRules（或rules）：该样式表中实际的 CSS 规则列表（需注意跨域限制）
示例：
for (let i = 0; i <h3>安全读取 cssRules 的注意事项</h3> <p>直接访问 <code>sheet.cssRules</code> 可能触发 SecurityError（尤其对跨域 <code><link></code>）：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6235" title="Java Maven Code Review"><img src="https://img.php.cn/upload/skill/000/000/081/179084711841712.jpg" alt="Java Maven Code Review" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6235" title="Java Maven Code Review" class="overflowclass">Java Maven Code Review</a> <p class="overflowclass">审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。</p> </div> <a rel="nofollow" href="/xiazai/skill6235" title="Java Maven Code Review" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
- 可用
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;
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
