动态插入 <style> 标签是否生效
完全生效，但必须插入到 <head> 中，且不能依赖 CSS 选择器提前匹配尚未存在的元素。浏览器会立即解析新插入的 <style> 内容，后续创建的匹配元素会自动应用样式。
常见错误现象：<style> 插入到 <body> 末尾、或插在动态内容之后却期望立刻影响已渲染的 DOM —— 这时样式可能不触发重绘，或被层叠顺序覆盖。
务必用 document.head.appendChild(styleEl)，别用 document.body.appendChild()如果样式依赖类名（如 .card），而对应元素是稍后才用 innerHTML 或 createElement 创建的，没问题；但若元素已存在却没匹配上，先检查选择器拼写和作用域（比如是否加了 :not(.loaded) 这类限制）避免重复插入相同规则：多次插入同名 class 的样式不会报错，但会增加计算负担，建议插入前用 document.querySelector(‘style[data-id="my-theme"]’) 检查是否已存在
insertRule 和直接写 textContent 哪个更稳妥
优先写 textContent。它简单、兼容性好（IE9+）、支持任意复杂规则（@media、:is()、自定义属性等），而 insertRule 对语法错误零容忍，且无法处理带嵌套块的规则（如 @keyframes 必须整段注入）。
使用场景：仅当你需要运行时高频增删单条规则（比如主题色切换只改一个变量值），且确定目标环境支持 CSSOM（Chrome/Firefox/Edge 新版 OK，Safari 15.4+ 才完整支持 insertRule 在 <style> 上的操作）。
立即学习“前端免费学习笔记（深入）”；
写 textContent 示例：const style = document.createElement(‘style’);<br>style.textContent = `.alert { color: red; } @media (max-width: 600px) { .alert { font-size: 12px; } }`;<br>document.head.appendChild(style);insertRule 会抛出 DOMException: Failed to execute ‘insertRule’ on ‘CSSStyleSheet’ 如果字符串末尾缺分号、或写了 @import动态生成多条规则时，拼接字符串比反复调用 insertRule 更快，尤其在循环中
动态样式如何避免污染全局或引发层叠冲突
核心是控制选择器作用域和 specificity。动态插入的样式默认就是全局的，不会因为“动态”就自动隔离。
性能影响：无额外开销，但若选择器过于宽泛（如 div、*[data-tip]），会拖慢每次样式计算；兼容性上，所有现代浏览器对动态 <style> 的层叠逻辑一致，问题多出在开发者预期偏差。
给动态样式加唯一前缀，比如把 .button 写成 .theme-v2-button，配合 JS 创建元素时也带上该 class用属性选择器限定作用范围：[data-dynamic-theme="dark"] .text，再通过切换 document.documentElement.dataset.dynamicTheme 控制生效时机避免用 !important —— 它会让后续 JS 动态调整样式变得不可控，且难以调试如果项目用了 Shadow DOM，动态 <style> 插入到 shadowRoot 中即可天然隔离，无需额外前缀
服务端渲染（SSR）页面里动态加样式会不会导致 FOUC
会，但只发生在首次 JS 执行前的空白期。如果 HTML 已含服务端生成的样式，而 JS 又插入一套新的同名规则，浏览器会按加载顺序合并，通常不会闪动；但如果服务端没输出关键样式，JS 加载延迟，就会出现未样式化内容（FOUC）。
容易踩的坑：在 DOMContentLoaded 甚至 load 事件后才插入样式 —— 此时首屏早已渲染完毕，用户能看到几毫秒的裸文本或错位布局。
最佳时机是脚本内联执行，或至少在 <head> 中紧随关键 JS 后插入：<script><br> const style = document.createElement(‘style’);<br> style.textContent = `body { margin: 0; }`;<br> document.head.appendChild(style);<br></script>不要等 React/Vue 的 mounted 钩子 —— 它们触发时 DOM 已经完成初始渲染，样式补丁来晚了若必须异步加载样式内容（如从 API 获取主题配置），至少先插入一个空 <style data-placeholder> 占位，防止浏览器跳过样式计算阶段
最麻烦的其实是 CSS 变量和媒体查询的组合使用——它们看起来动态，但实际生效依赖于插入时机和根元素状态，稍不注意就会发现暗色模式切换后字体颜色没变，不是 JS 没跑，是样式插入时 :root 还没挂载媒体查询监听器。
评论(0)