必须设置rel="stylesheet"且href为完整路径，监听load事件确保样式就绪后再操作dom，避免重复挂载或未清除旧样式导致冲突。
怎么用 document.createElement('link') 动态插入 CSS 文件
直接创建 link 元素并挂载到 head 是最轻量、兼容性最好的方式，不需要框架或构建工具介入。关键不是“能不能”，而是“挂了之后样式为什么没生效”——多数问题出在属性漏设或时机不对。
- 必须显式设置
rel="stylesheet"，否则浏览器不解析为样式表 -
href必须是完整路径（相对路径以当前 HTML 为基准，非 JS 文件位置） - 建议在
link加载完成后再操作 DOM，监听load事件比setTimeout可靠 - 避免重复挂载：可先用
document.querySelector('link[href="xxx.css"]')检查是否已存在
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/styles/theme-dark.css';
link.onload = () => console.log('dark theme loaded');
document.head.appendChild(link);
为什么动态挂载后样式没更新？常见加载时机问题
单页应用里最常踩的坑是：JS 执行时 DOM 已渲染完毕，但新样式表还没加载完，导致初始渲染未应用新规则。CSS 的层叠和优先级不会因挂载顺序自动重排，但浏览器会等 link 加载并解析后才触发重绘。
- 不要在组件
mounted或useEffect中立即读取getComputedStyle，此时样式可能未就绪 - 若需确保样式生效后再操作，把逻辑放在
link.onload回调里，而非紧随appendChild - 服务端返回的 CSS 若含
@import，会进一步延迟解析完成时间，load事件只表示link标签资源下载完成，不保证所有嵌套依赖就绪
如何安全替换已有主题样式表（比如深色/浅色切换）
不能只追加新 link，否则旧样式仍参与层叠，容易冲突。正确做法是先移除旧的、再挂载新的，且要控制好 DOM 更新节奏。
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- 给动态挂载的
link加唯一id（如id="app-theme"），方便后续定位和替换 - 移除前检查是否存在，避免
removeChild报错：document.getElementById('app-theme')?.remove() - 如果新样式表内容与旧的仅部分规则不同，更推荐用
CSSStyleSheet.insertRule动态改规则，而非整张表替换 - 注意：Safari 对动态
insertRule的跨域限制比 Chrome 更严，纯外链 CSS 替换仍是兼容性兜底方案
原生 JS 动态挂载 vs. 框架方案（如 Vue 的 <style scoped></style> 或 React 的 CSS-in-JS）
原生挂载的优势是零依赖、体积小、对 SSR 友好；劣势是无法做作用域隔离、无热更新、不支持 CSS 变量注入等高级能力。它适合主题切换、AB 测试分组加载、按路由懒加载独立样式等明确边界场景。
- 不要用它来替代组件级样式封装——没有
scoped或哈希类名，容易污染全局 - 若 CSS 文件本身含大量
@media或@supports，动态挂载后这些规则会立即生效，无需额外触发 - 构建工具（如 Vite）的
import '/xx.css'在开发时会转成动态link插入，但生产环境可能内联或合并，行为不一致，调试时要注意区分环境
真正难的不是挂载动作本身，而是判断“该不该挂”“挂完要不要清”“清了会不会闪”——这些都得结合你的路由状态、用户偏好存储方式、以及是否启用 CSS 优先级重置逻辑来定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
