JavaScript动态注入外链CSS本质是创建link元素并插入head，需设rel="stylesheet"和href，支持防重、异步加载监听及CSP兼容性处理。
创建 link 元素并设置属性
需要手动创建 `` 节点，指定必要属性：rel="stylesheet"、type="text/css"（可选，现代浏览器可省略）、href（指向 CSS 文件的 URL）。
- 确保
href是有效路径，支持相对路径、绝对路径或完整 URL - 推荐添加
id或data-*属性，便于后续查找或移除 - 若需避免重复加载，可先检查是否已存在同名 link 节点
插入到 head 中
必须将 link 插入到 <head> 内才会生效；插入到 <body> 通常无效（部分浏览器可能兼容但不保证行为一致）。
- 使用
document.head.appendChild(link)是最常用方式 - 也可用
document.head.insertBefore(link, document.head.firstChild)插入到最前
完整示例代码
以下是一个安全、可复用的注入函数：
function injectCSS(url, id) {
// 防重复：已存在则直接返回
if (id && document.getElementById(id)) return;
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
if (id) link.id = id;
// 插入 head
document.head.appendChild(link);
}
// 使用示例
injectCSS('/css/theme-dark.css', 'dark-theme');
注意事项
实际使用中需留意几个关键点：
立即学习“Java免费学习笔记（深入）”；
- 跨域 CSS 文件受 CORS 限制，若服务器未配置
Access-Control-Allow-Origin，样式可能加载失败且无明确报错 - 加载是异步的，样式应用有延迟；如需等样式就绪，可监听
link.onload（成功）和link.onerror（失败） - 某些旧版 IE（如 IE8）不支持
link.onload，需用轮询sheet.cssRules或定时检测 - 移动端 WebView 或严格 CSP 环境下，可能禁止动态注入外部资源，需检查 CSP 策略是否允许
style-src
