最可靠方式是直接查询中rel="stylesheet"且href属性值完全匹配目标路径的元素；需注意url编码、查询参数、cdn哈希等细节，推荐用id或data-css-key标识以提升稳定性。
怎么判断目标 CSS 是否已在 head 中加载
直接查 <link rel="stylesheet"> 的 href 值是否匹配，是最可靠的方式。不能只看元素是否存在，因为可能有多个 link，也可能存在同名但路径不同的旧引用。
用 jQuery 写就是：
const existing = $("head link[rel='stylesheet'][href='skins/light.css']");
注意三点：
-
[href='...']必须用属性选择器，不是.attr("href")—— 后者取的是解析后 URL，可能带协议和域名，比对会失败 - 如果 CSS 路径含查询参数（如
?v=1.2），要确保比对时也带上，否则即使内容相同也会被当成“未加载” - 某些构建工具或 CDN 会自动重写 href（比如加 hash），此时建议改用
id或data-css-key标识，更稳定
jQuery 插件里避免重复加载同一份 CSS
插件初始化时，若不检查就直接 $("head").append(...)，会导致多次插入相同样式表，轻则浪费请求，重则触发浏览器样式层叠异常（尤其在 Safari 中）。
推荐写法：
function loadSkinCSS(url) {<br> if ($(`head link[rel="stylesheet"][href="${url}"]`).length) return;<br> $("<link>", { rel: "stylesheet", href: url }).appendTo("head");<br>}
补充要点：
- 不要用
.prop("href", url)修改已有link—— 这不会触发重加载，且部分浏览器会忽略 - 如果插件支持多实例（比如多个组件各自调用），需统一用全局缓存标记，例如
window.__loadedCSS = new Set()，避免跨实例重复 - 开发阶段可加一句
console.debug("CSS loaded:", url)，上线前删掉，方便定位漏加载问题
动态加载后如何确认样式已生效
link.onload 只表示资源下载完成，并不保证样式已计算、布局已重排。尤其在快速切换皮肤时，DOM 还没响应新规则就执行 JS 操作，容易出错。
稳妥做法是监听 onload + 微任务延迟 + 强制读取触发 layout：
const link = $("<link>", { rel: "stylesheet", href: url })[0];<br>link.onload = () => {<br> Promise.resolve().then(() => {<br> // 触发一次强制 layout，确保样式应用<br> getComputedStyle(document.body).opacity;<br> });<br>};<br>$("head").append(link);
关键细节：
- Safari 对
link.onload支持不稳定，必须搭配onerror回退逻辑 - 不用
setTimeout(..., 0)，它依赖事件循环空闲，不如Promise.resolve().then()精确 - 读取任意一个会触发 layout 的属性（如
offsetHeight、getComputedStyle(...).color）都行，选副作用最小的
插件打包时 CSS 路径容易出错的点
jQuery 插件常被不同项目引入，而 CSS 路径是相对的。一旦插件 JS 被放在子目录或 CDN 上，href 就可能 404。
两个务实解法：
- 让使用者显式传入路径：
$.myPlugin({ cssPath: "/assets/myplugin.css" })，插件内部不做拼接 - 若坚持自动推导，用
document.currentScript获取当前 JS 文件路径再向上回溯，但注意 IE 不支持，得降级为遍历script[src]找匹配项 - 绝对不要用
__dirname或import.meta.url—— jQuery 插件几乎都是运行时 script 标签加载，没有模块上下文
最常被忽略的是：插件里硬编码的路径，在 Webpack/Vite 构建环境下会被当作静态资源处理，而实际部署时可能走的是独立 CDN，此时 href 必须和构建配置对齐，否则连 404 都看不到——请求被拦截在 CSP 或代理层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
