动态引入CSS必须设置rel="stylesheet"和有效href，插入head中并监听onload/onerror；多link按序插入保证覆盖逻辑；现代可用CSSStyleSheet API但兼容性有限。
用 document.createElement('link') 创建 CSS 引入节点
直接创建 link 元素是可行的，但必须严格设置 rel="stylesheet" 和 href，否则浏览器不会加载样式。常见错误是漏掉 rel 或写成 rel="style" 这类无效值，导致节点插入成功但样式完全不生效。
-
rel必须是"stylesheet"（注意拼写，不是"style"或"css"） -
href必须为有效路径，相对路径以当前 HTML 文件位置为基准，不是 JS 执行位置 - 建议在
head中插入，避免在body后期插入引发 FOUC 或样式闪烁
为什么 link 插入后样式没反应？检查加载状态和时机
即使 DOM 节点已存在，CSS 文件可能尚未加载完成或加载失败。浏览器不会抛出 JS 错误，但控制台会显示 404 或 CORS 警告。可以用 onload 和 onerror 监听真实加载结果：
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/assets/theme.css';
link.onload = () => console.log('CSS loaded');
link.onerror = () => console.error('CSS load failed:', link.href);
document.head.appendChild(link);
-
onload在样式表解析完成时触发（不一定等所有规则生效，但资源已就绪） -
onerror对 404、跨域拒绝、MIME 类型错误都有效，比单纯查 DOM 更可靠 - 不要依赖
link.sheet立即访问 —— 加载前它是null，需等onload后再读
动态加载多个 CSS 时要注意加载顺序和并发限制
浏览器对同一域名的并行 CSS 请求有限制（通常 6 个），且 link 标签默认是异步加载但**阻塞渲染**（即影响页面首次绘制）。如果按顺序插入多个 link，它们会并发请求，但样式规则最终合并生效，顺序由插入 DOM 的先后决定 —— 后插入的规则可覆盖先插入的同名规则。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 若需强顺序（如 base.css → theme.css → override.css），确保按序
appendChild，不要用insertAdjacentElement插到开头 - 避免在循环中连续创建大量
link，可能触发浏览器资源限制或样式抖动 - 重复插入相同
href的link不会重复加载，但会多一个无用 DOM 节点
兼容性与现代替代方案：CSSStyleSheet API 更可控但支持有限
Chrome 89+、Firefox 94+ 支持用 document.adoptedStyleSheets 动态注入 CSS 文本，绕过网络请求，适合运行时生成样式：
立即学习“前端免费学习笔记（深入）”；
const sheet = new CSSStyleSheet();
sheet.replaceSync('.btn { color: red; }');
document.adoptedStyleSheets = [sheet];
- 优势：无网络依赖、可编程构造、插入即生效、不污染
head - 劣势：IE 完全不支持，Safari 15.4+ 才支持
replaceSync，旧版需降级回link方案 - 混合方案：检测
CSSStyleSheet可用性，不可用时 fallback 到link创建
真正难的不是创建节点，而是判断「样式是否真的可用」—— 依赖 onload 是底线，需要样式生效后再操作 DOM 的逻辑，得把后续动作明确挂在这类回调里。
