如何在原生JavaScript中使用CSSStyleSheet对象引入样式？-css教程-PHP中文网

cssstylesheet对象是浏览器解析后的样式表只读接口，不能直接“引入”样式；它需通过new cssstylesheet()创建并用replacesync()/replace()注入规则，再挂载到shadowroot.adoptedstylesheets才能生效。

如何在原生javascript中使用cssstylesheet对象引入样式？

什么是 CSSStyleSheet 对象？它能直接“引入”样式吗？

CSSStyleSheet 本身不是用来“引入”样式的工具，而是浏览器解析后的样式表的只读接口。你不能用它像 import 或 link 那样加载外部 CSS 文件；它只代表已存在（或动态创建）的样式规则容器。真正能“引入”样式的，是 document.styleSheets 列表里的项，或你手动插入的 style / link 元素。

CSSStyleSheet 实例通常来自：document.createElement('style').sheet、document.styleSheets[i]、或 new CSSStyleSheet()（需配合 adoptedStyleSheets）
它没有 load()、import() 等方法，调用会报 TypeError: Illegal invocation
想加载远程 CSS？得走 link 元素 + onload，或者 fetch 后注入文本

如何用 new CSSStyleSheet() 创建并生效样式？

new CSSStyleSheet() 是现代方案（Chrome 85+、Firefox 99+、Safari 17.4+），但它不会自动生效，必须显式挂载到 DOM 或 ShadowRoot 上：

必须用 replaceSync() 或 replace() 写入规则（不能直接改 cssRules）
单独创建的 CSSStyleSheet 不会作用于任何元素，除非：
- 插入到 document.adoptedStyleSheets（仅对 Document-level 样式有效，且需启用 Document.adoptedStyleSheets 特性）
- 或挂到 ShadowRoot.adoptedStyleSheets（更常见，用于 Web Components）

const sheet = new CSSStyleSheet();
sheet.replaceSync(`.btn { color: red; padding: 4px; }`);
<p>// 挂到 shadow root（推荐）
const shadow = elem.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets = [sheet];</p><p>// 或挂到 document（有限支持，部分浏览器不生效）
if (document.adoptedStyleSheets) {
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
}</p>

注意：document.adoptedStyleSheets 在多数浏览器中仍为只读数组（赋值会静默失败），实际兼容性远不如 ShadowRoot 场景。

为什么 document.styleSheets[i].insertRule() 有时无效？

常见错误是试图往未插入 DOM 的 style 元素的 sheet 上写规则，或忽略规则语法/顺序限制：

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

insertRule() 只对已挂载的 style 或 link 对应的 sheet 生效
规则字符串必须符合 CSS 语法，比如漏掉花括号、分号，或用了不支持的语法（如嵌套、变量未定义）
插入位置索引超出当前规则数时会抛 IndexSizeError
@media、@keyframes 等 at-rule 必须用 insertRule() 而非 addRule()（后者已废弃）

const style = document.createElement('style');
document.head.appendChild(style); // 必须先挂载！
const sheet = style.sheet;
<p>// ✅ 正确
sheet.insertRule('.card { border: 1px solid #ccc; }', 0);</p><p>// ❌ 无效：style 还没 append 到 DOM，sheet 可能为 null 或只读
// const sheet = document.createElement('style').sheet;
// sheet.insertRule(...);</p>

fetch CSS 文件后怎么安全注入到 stylesheet？

fetch 返回的是文本，不是 CSSOM；不能直接 assign 给 sheet.cssText（该属性只读）。正确路径是：

创建 style 元素，设 textContent，再 append 到 head
或用 CSSStyleSheet.replace()（异步）配合 fetch().then(r => r.text())

fetch('/theme.css')
  .then(r => r.text())
  .then(css => {
    const sheet = new CSSStyleSheet();
    return sheet.replace(css); // 返回 Promise
  })
  .then(() => {
    // 挂到 shadow root
    shadow.adoptedStyleSheets = [sheet];
  });

关键点：