可以，动态创建 <link> 标签能加载 CSS；需设 rel="stylesheet" 和有效 href，监听 onload/onerror，但加载完成不等于样式立即生效，多文件并发加载顺序不保证。
动态创建 <link> 标签能加载 CSS 吗
可以，这是标准且被广泛支持的方式。浏览器会解析并应用通过 JavaScript 动态插入的 <link rel="stylesheet">，效果等同于 HTML 中静态写的样式表。
link 标签必须加 rel="stylesheet" 和 href
缺一不可，否则不会触发 CSS 加载：
-
rel不是"stylesheet"（比如写成"style"或漏掉）→ 浏览器忽略该标签 -
href为空、非法路径或跨域未配 CORS → 控制台报net::ERR_ABORTED或CORS error - 没加
type="text/css"没关系，现代浏览器已默认识别
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/assets/theme-dark.css';
document.head.appendChild(link);
加载完成时机不可靠，onload 和 onerror 必须监听
CSS 加载是异步的，但不像 fetch 那样返回 Promise；它只提供事件回调，且不保证样式“已生效”（例如可能还没参与重排）：
-
link.onload表示资源下载并解析完成，但 DOM 可能尚未重绘 -
link.onerror在 404、CORS、MIME 类型错误时触发（注意：不是所有错误都进这里，比如 CSS 语法错误静默忽略） - 不要依赖
link.sheet立即可用——某些浏览器下sheet属性在onload后仍为null，需加短延时或轮询
link.onload = () => {
console.log('CSS loaded');
// 如需确保样式已应用，可触发一次强制重排
getComputedStyle(document.body).color;
};
link.onerror = () => {
console.error('Failed to load CSS:', link.href);
};
多个动态 CSS 并发加载时，顺序不保证
即使按顺序 appendChild，实际生效顺序取决于网络响应快慢和浏览器解析节奏，可能导致样式覆盖错乱：
立即学习“前端免费学习笔记（深入）”；
- 若
A.css依赖B.css的变量或类，不能只靠插入顺序保障 - 解决方案：链式加载（上一个
onload再创建下一个），或用Promise.all+insertRule手动注入关键规则 - 服务端合并 CSS 更可靠；动态加载更适合主题切换、按需功能样式等场景
真正容易被忽略的是：CSS 加载完成 ≠ 样式已反映在元素上，尤其涉及 @import、字体加载、或使用了 prefers-color-scheme 等媒体查询时，得结合 matchMedia 或 requestAnimationFrame 做二次确认。
