jquery中用attr()改link的href不生效，因现代浏览器对已加载link的href变更不触发重载；可靠方式是移除旧link并插入新link节点，需加唯一id定位、用原生addeventlistener监听load/error事件，并防缓存加时间戳。
jQuery中用attr()改link的href为何不生效
直接调用 $('link').attr('href', 'new.css') 多数情况下不会触发浏览器重新加载样式，因为浏览器对已解析的 link[rel="stylesheet"] 元素的 href 变更不作响应——这不是 jQuery 的 bug，而是浏览器规范行为。
常见错误现象：attr() 执行后 DOM 确实变了，但页面样式没更新，控制台也无报错。
- 仅当
link元素尚未完成加载（比如刚插入 DOM 但还没触发 fetch）时，改href才可能生效 - 已加载完成的样式表，改
href相当于“改了个寂寞” - 部分旧版 IE 会重载，但现代 Chrome/Firefox/Safari 均不重载
真正可靠的动态加载方式：替换link节点而非修改属性
核心思路是移除旧 link，再创建并插入新 link。这样能确保浏览器发起新请求并应用样式。
实操建议：
- 给目标
link加唯一id或data-*属性，方便精准定位，例如：<link id="theme-css" rel="stylesheet" href="light.css"> - 用
remove()干掉旧节点，再用$('<link>')构造新节点，设置rel、href、type（推荐显式写type="text/css"） - 插入位置必须和原节点一致（常用
after()+remove()组合，或用replaceWith()）
简短示例：
$('link#theme-css').replaceWith(
$('<link>')
.attr('rel', 'stylesheet')
.attr('type', 'text/css')
.attr('href', 'dark.css')
);
加载失败时如何捕获错误
link 加载失败不会触发 jQuery 的 error 事件（它只监听 img/script），但原生 link 元素支持 onerror。
实操建议：
- 用原生 DOM 方式绑定
onerror，避免依赖 jQuery 事件机制 - 在插入新
link后立即设置onerror回调，并注意清除旧节点的监听（如果复用节点） - 失败后可回退到默认样式或提示用户
示例片段：
const newLink = document.createElement('link');
newLink.rel = 'stylesheet';
newLink.href = 'custom.css';
newLink.onerror = () => console.warn('CSS load failed:', newLink.href);
document.head.appendChild(newLink);
兼容性与性能注意点
动态加载 CSS 不是“越快越好”，尤其在主题切换等场景下，需考虑渲染一致性。
- Chrome 从 v120 起对高频
link替换有资源限流，连续快速切换可能导致样式延迟应用 - 旧版 Safari（iOS 14 之前）对
link插入时机敏感，建议用requestAnimationFrame包裹插入操作 - 若 CSS 文件较大，用户可能看到短暂闪屏；可配合
bodyclass 控制过渡（如先加loading-themeclass，等load事件后再切）
真正容易被忽略的是：link 的 load 事件在所有浏览器中都可用，但 jQuery 的 .on('load') 对 link 不可靠——务必用原生 addEventListener('load', ...) 捕获成功加载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
