必须设rel="stylesheet"，否则浏览器不加载CSS；常见错误包括rel缺失或写错、link未插入head、404或CORS失败、路径含特殊字符未编码，应绑定onload/onerror校验，禁用用disabled属性，移除用remove()。
必须设 rel="stylesheet"，否则浏览器根本不会加载 CSS —— 这是 90% 动态引入失败的根源。
为什么 link 元素加了 href 却没生效
常见错误现象：DOM 中能看到 link 标签，href 路径也对，但样式完全不应用。
-
rel属性缺失或写错（比如写成rel="style"、rel="css"、甚至漏掉） - 标签插入到了
document.body或其他非head位置，部分浏览器延迟解析或忽略 - CSS 文件返回 404 或 CORS 拒绝，但没监听
onerror，误以为“已加载” - 路径含中文、空格或特殊字符，未做
encodeURIComponent()处理（尤其拼接变量时）
如何安全插入并确认加载完成
不能只靠 appendChild() 就认为完事。现代浏览器支持 onload/onerror，但它们不是 Promise，也不能捕获跨域静默失败。
- 必须显式绑定事件：
link.onload = () => { /* 启用依赖样式的 UI */ }; -
link.onerror = () => console.warn('CSS load failed:', link.href);—— 注意：跨域 CSS 加载失败时，onerror不触发，仅控制台报错 - 若需强校验，可在插入前用
fetch(href, { method: 'HEAD' })预检（注意跨域限制，仅同源有效） - 避免重复插入：插入前查
document.querySelector(`link[href="${href}"]`)，存在则跳过
type="text/css" 还需要吗
在所有现代浏览器（Chrome 80+、Firefox 70+、Safari 14+、Edge 88+）中，type 属性已完全冗余；但 IE8–IE11 仍要求它，否则可能拒绝加载。
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
立即学习“Java免费学习笔记（深入）”；
- 若项目还需兼容 IE，保留
link.type = "text/css"; - 纯现代环境可省略，但加了也无害
- 不要写成
type="css"或type="stylesheet"—— 这是无效值
动态加载后怎么换主题或卸载旧样式
没有原生的 “unload CSS” API。所谓“切换”，本质是控制 link 元素的 disabled 属性或移除节点。
- 启用/禁用某条样式：设置
link.disabled = false或true（仅对已加载完成的生效） - 彻底移除：用
link.remove()，但注意这不会清除已应用的样式规则（浏览器已解析进样式表） - 真正干净切换主题，建议给每个
link打标记，如link.dataset.theme = "dark"，方便后续按需查删 - 慎用
document.styleSheets遍历操作 —— 跨域 CSS 会触发 SecurityError，且顺序不稳定
最易被忽略的一点：动态插入时机本身不保证样式“立即可用”。即使 onload 触发，若此时 DOM 已渲染完毕，新样式可能不会重绘已有元素 —— 需配合 getComputedStyle() 强制触发回流，或在关键节点上手动添加 class 触发重绘。
