动态创建标签插入css最轻量可控，应使用textcontent而非innerhtml；insertrule适合精准增删规则但需注意索引偏移和兼容性；务必通过data-*属性标识并管理样式节点以防重复和泄漏。
动态创建 <style></style> 标签插入CSS规则
直接往 document.head 里 append 一个带 CSS 文本的 <style></style> 元素，是最轻量、兼容性最好、也最可控的方式。它不依赖外部文件加载时机，也不触发重排（除非样式立即影响可见元素），适合运行时按需开关主题、适配暗色模式、或做 A/B 测试。
常见错误是把 CSS 字符串拼错（比如漏掉花括号、分号或选择器语法错误），导致整段规则静默失效；或者没加 textContent 而用了 innerHTML，意外触发 HTML 解析（有 XSS 风险）。
- 用
document.createElement('style')创建，不要用字符串拼接整个标签 - 写入规则必须用
textContent（不是innerHTML），避免转义和解析风险 - 插入前确保
document.head已存在（服务端渲染或极早执行时可能为null，可 fallback 到document.documentElement） - 示例：
const style = document.createElement('style');<br>style.textContent = 'body { background: #f0f0f0; } .highlight { color: red; }';<br>document.head.appendChild(style);
insertRule 动态增删单条 CSS 规则
如果已有 <style></style> 标签，想在不替换全部内容的前提下追加、修改或删除某条规则，就该用 CSSStyleSheet.insertRule 和 deleteRule。它比反复重写 textContent 更精准，也更适合频繁更新的场景（比如实时编辑器高亮）。
容易踩的坑是：规则索引从 0 开始，但插入后所有后续规则索引会偏移；跨浏览器对 @media 或 @keyframes 的支持略有差异；还有——调用前必须确认 sheet.cssRules 可读（某些内联样式表或跨域 CSS 可能被限制）。
- 先获取目标
<style></style>元素的.sheet属性，再调用insertRule(rule, index) - 插入位置
index可设为0（开头）或sheet.cssRules.length（末尾） - 删除时注意索引是否越界，建议先用
Array.from(sheet.cssRules)快照当前规则列表 - 示例：
const style = document.querySelector('style[data-id="theme"]');<br>if (style?.sheet) {<br> style.sheet.insertRule('.btn { border: 2px solid blue; }', style.sheet.cssRules.length);<br>}
避免重复插入同名 <style></style> 标签
多次执行插入逻辑（比如组件反复挂载/卸载、或用户快速切换主题），很容易留下多个功能重复的 <style></style> 标签，既浪费内存，又让调试变得混乱。关键不是“防重”，而是“可识别 + 可管理”。
很多人用随机 ID 或时间戳打标记，结果后期根本没法清理；也有人只靠 class 名匹配，但 class 可能被其他脚本误删或覆盖。
- 给
<style></style>加唯一id或data-*属性（如data-css-scope="dark-theme"） - 每次插入前先查是否存在：
document.querySelector('style[data-css-scope="dark-theme"]') - 需要更新时，直接复用已存在的节点，清空再写入新
textContent，而不是删了重建 - 卸载逻辑（如 React
useEffect清理函数）里，务必通过相同 selector 移除对应节点
IE11 及更老浏览器的 insertRule 兼容写法
IE11 支持 insertRule，但参数顺序和返回值跟现代浏览器不同：它要求第二个参数是必填的 index，且不支持在 @media 块内插入规则；而 IE9–10 只提供 addRule(selector, style, index)，且最大只支持 32 条规则（超出会静默失败）。
真要兼容，别试图封装统一 API，不如分层处理：现代环境走标准路径，旧环境降级为整块重写 textContent，并限制规则总数。
- 检测可用方法：
if (sheet.insertRule) { ... } else if (sheet.addRule) { ... } - IE9–10 的
addRule第三个参数是插入位置，不传默认追加到末尾 - 避免在旧浏览器中动态生成大量规则；超过 25 条时，考虑合并为单条带逗号的选择器
- 示例（IE 兼容）：
if (sheet.addRule) {<br> sheet.addRule('.old-ie-only', 'font-size: 12px; filter: alpha(opacity=80);');<br>} else if (sheet.insertRule) {<br> sheet.insertRule('.modern-only { opacity: 0.8; }', 0);<br>}
真正麻烦的不是插入样式，而是「什么时候删」和「删不干净」。尤其在单页应用里，没人主动清理的 <style></style> 标签会越积越多，最后连自己都搞不清哪条规则生效、哪条被覆盖。留个 data-css-id 不费事，但能让排查快十倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
