元素中
" />
动态创建 <style> 元素并调用 CSSStyleSheet.insertRule() 后，样式规则虽已成功添加到 sheet 对象中，但 <style> 元素内部仍为空；本文详解其根本原因及可靠解决方案。
动态创建 `
在 JavaScript 中，通过 document.createElement('style') 创建样式节点并调用 sheet.insertRule() 是向 DOM 动态注入 CSS 的常用方式。然而，许多开发者会遇到一个看似矛盾的现象：console.log(sheet) 显示规则已存在（如 cssRules.length === 1），但 console.log(styleElement) 却输出 <style></style> —— 内容为空，且浏览器开发者工具中也看不到任何文本内容。
根本原因在于：insertRule() 直接操作底层 CSSStyleSheet 对象，并不自动同步更新 <style> 元素的 textContent 或 innerHTML 属性。 浏览器渲染引擎仅依赖 sheet 的内部规则列表进行样式计算与应用，而 <style> 元素的文本内容（即源码可见部分）并非运行时必需——它只是初始加载时的解析来源。因此，insertRule() 成功 ≠ 文本内容自动回填。
✅ 正确做法：显式设置 styleElement.textContent
const styleElement = document.createElement('style');
document.head.appendChild(styleElement);
const fontIdentifier = 'MyCustomFont';
const font = { url: '/fonts/myfont.woff2' };
const rule = `@font-face {
font-family: '${fontIdentifier}';
src: url('${font.url}');
}`;
// ✅ 推荐：直接写入 textContent（最简洁、兼容性好）
styleElement.textContent = rule;
// 验证：此时 styleElement.innerHTML 和 textContent 均包含规则
console.log(styleElement.textContent); // "@font-face { ... }"
console.log(styleElement.sheet.cssRules.length); // 1（规则已生效）⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要混用 insertRule() 与手动设置 textContent：二者操作路径不同，混合使用可能导致规则重复或覆盖异常；
- insertRule() 在某些旧版 Safari 中对 @font-face 支持不稳定，而 textContent 方式在所有现代浏览器中均 100% 可靠；
- 若需批量插入多条规则，请用换行符拼接字符串后一次性赋值 textContent，避免多次重排（performance-wise 更优）；
- styleElement.sheet 在 appendChild() 后才可用，务必确保元素已挂载至 DOM（或至少拥有 ownerDocument）。
? 总结：
<style> 元素是否“显示内容”与其样式是否生效无关；insertRule() 确保规则进入样式表，但若需 DOM 节点具备可读文本内容（如调试、SSR 兼容、或第三方库依赖 innerHTML），请始终优先使用 textContent = ruleString。这是语义清晰、行为确定、跨浏览器稳健的最佳实践。
