直接改link的href可触发CSS重载，但需满足link已存在DOM、rel="stylesheet"、同源或CORS；常见问题包括缓存、404静默失败、选错元素，应加唯一id、时间戳防缓存、监听load事件并兼容IE。
直接改 href 会触发重载，但有前提条件
浏览器确实会在你修改 元素的 href 属性后自动加载新 CSS 并应用样式，但前提是该 必须已存在于 DOM 中、且 rel 值为 "stylesheet"（不能是 "preload" 或其他），同时新 URL 必须是同源或满足 CORS（否则控制台报 Cross-Origin Read Blocking 错误，样式不生效）。
常见错误现象：href 改了，控制台没报错，但页面样式没变——大概率是缓存导致，或者新 CSS 文件路径 404 但被静默忽略（浏览器不会抛 JS 异常，只发一个失败的网络请求）。
- 务必确保目标
有唯一标识（比如id="theme-css"），避免选错元素 - 推荐在修改前先清空旧样式影响：给
加个临时 class 如loading-theme，CSS 里用body.loading-theme * { transition: none !important; }防止切换时闪动 - 修改后监听
load事件确认加载完成（注意 IE 不支持link.onload，需降级用轮询document.styleSheets）
jQuery 修改 href 的安全写法
别直接 $("link#theme-css").attr("href", "dark.css") —— 这在 jQuery 3.0+ 里可能因缓存策略失效；更稳妥的是强制替换整个属性节点：
const $themeLink = $("link#theme-css");
if ($themeLink.length) {
const newHref = "skins/dark.css";
// 移除旧 link（避免残留样式冲突）
$themeLink.remove();
// 插入新 link（保证 DOM 重排触发加载）
$("head").append($("<link>").attr({
rel: "stylesheet",
id: "theme-css",
href: newHref + "?v=" + Date.now() // 时间戳防缓存
}));
}
为什么加时间戳？因为某些 CDN 或服务器会缓存 CSS 响应，即使文件内容变了，href 相同就复用旧缓存。加 ?v= 是最轻量的 bust cache 方式。
- 不要用
.prop("href", ...)—— 它操作的是解析后的绝对 URL，不是原始属性值，改了也不触发重载 - 如果项目用了
integrity或crossorigin属性，记得一并复制到新上，否则可能被 CSP 拦截 - 移动端 Safari 对动态
加载有时延迟，可配合setTimeout(() => { /* 强制重绘 */ }, 16)触发一次 layout
皮肤切换时如何保留用户自定义设置（如字体大小、主题色）
纯靠换 CSS 文件无法保存运行时修改的样式（比如用户拖动滑块调高了字号）。得把这类“覆盖层”逻辑抽离出来，用内联 style 或单独的 标签管理：
// 把用户偏好存在 <style id="user-overrides">
function updateUserOverrides(cssText) {
let $override = $("#user-overrides");
if (!$override.length) {
$override = $("<style id="user-overrides"></style>").appendTo("head");
}
$override.text(cssText);
}
// 调用示例：updateUserOverrides("body { font-size: 18px; }");
这样换皮肤 CSS 时，#user-overrides 里的规则仍有效（层叠优先级高于外部 CSS），且不随皮肤文件更新而丢失。
- 避免在
里写太宽泛的选择器（如div { color: red; }），容易和皮肤 CSS 冲突 - 如果皮肤 CSS 用了
!important，那你的覆盖层也得加，但尽量少用——优先靠 specificity 提升权重 - localStorage 存储用户设置，页面初始化时先读取再调用
updateUserOverrides
IE11 及以下必须绕开的坑
IE 不支持 的 onload 事件，且对动态插入的 CSS 加载时机不可控。若必须兼容，只能退化为预加载 + 替换：
- 提前把所有皮肤 CSS 用
加载（IE 不识别 preload，所以得用 XHR +createStyleSheet） - 对 IE：用
document.createStyleSheet(href)注入，它返回一个StyleSheet对象，可后续通过removeRule()清理 - jQuery 的
.remove()在 IE 中对有时不彻底，建议手动link.parentNode.removeChild(link) - 测试时打开 F12 → Network → Disable cache，否则 IE 会死命缓存旧 CSS
真正麻烦的不是换皮肤，而是确保每次换完，getComputedStyle 返回的值能立刻反映新样式——这在 IE 和旧版 Safari 里经常要等一帧甚至两帧，业务逻辑里别假设“改完 href 就立刻生效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
