动态加载外部样式表本质是创建link元素并插入head，设置rel="stylesheet"和有效href，监听load/error事件，避免重复加载，卸载用remove()。
动态加载并执行外部样式表，本质是向页面 中插入一个 <link rel="stylesheet"> 元素，并确保浏览器正确解析和应用它。JavaScript DOM 操作本身不“执行”样式表（CSS 无执行逻辑），但能触发加载与渲染生效。
创建 link 元素并设置属性
这是最基础的步骤：用 document.createElement('link') 创建元素，设置必需属性，再挂载到 DOM。
-
rel 必须为
"stylesheet"，否则浏览器不会当作样式表处理 - href 填写有效的 CSS 文件 URL（支持相对路径、绝对路径或 CDN）
-
type 可省略（现代浏览器默认
"text/css"），但显式写上更清晰 - 建议添加 id 或 data-* 属性，便于后续查找或卸载
插入到 head 中并监听加载状态
插入位置推荐 document.head，确保样式尽早参与渲染。可监听 load 和 error 事件来判断是否成功：
-
link.onload在样式表下载完成且解析生效后触发（注意：不是 DOM 渲染完成，但样式已可用） -
link.onerror在 404、跨域拒绝、MIME 类型错误等场景下触发 - 避免在
onload中立即读取getComputedStyle，极少数情况下可能因渲染队列未更新而取不到最新值；如需确保，可用requestAnimationFrame延迟一帧
避免重复加载与简单卸载方法
多次插入同一样式表虽不会报错，但浪费请求且可能导致样式覆盖混乱：
- 插入前先用
document.querySelector('link[href="xxx.css"]')检查是否已存在 - 如需卸载，直接调用
link.remove()即可移除 DOM 节点，对应样式会立即失效（已应用的样式会被浏览器自动回退） - 注意：卸载不会清除已由该 CSS 触发的动画、过渡或伪类状态，但后续匹配规则不再生效
完整示例代码
以下是一个健壮、可复用的函数：
function loadCSS(url, options = {}) {
const { id, onLoad, onError, before } = options;
<p>if (document.querySelector(<code>link[href="${url}"]</code>)) {
typeof onLoad === 'function' && onLoad();
return;
}</p><p>const link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = url;
if (id) link.id = id;</p><p>link.onload = () => typeof onLoad === 'function' && onLoad(link);
link.onerror = () => typeof onError === 'function' && onError(link);</p><p>const target = before ? document.querySelector(before) : document.head;
target.insertBefore(link, target.firstChild || null);
}</p><p>// 使用示例
loadCSS('/styles/theme-dark.css', {
id: 'dark-theme',
onLoad: () => console.log('深色主题已加载'),
onError: () => console.error('主题样式加载失败')
});</p>Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
