如何在JQuery老项目中通过AJAX动态异步引入CSS片断？-css教程-PHP中文网

不能用$.get()或$.ajax()加载css文件，因为它们仅返回css文本字符串，无法触发浏览器原生样式解析机制，导致丢失缓存、@import、媒体查询等关键能力；正确做法是动态创建并插入标签到中。

如何在jquery老项目中通过ajax动态异步引入css片断？

直接用 $("<link>") 创建并插入即可，但必须注意加载时机和缓存行为，否则 CSS 可能不生效或重复加载。

为什么不能用 `$.get()` 或 `$.ajax()` 加载 CSS 文件

CSS 文件不是数据，而是样式资源；$.get() 返回的是字符串内容（比如一堆 CSS 规则文本），但浏览器不会自动解析它为样式规则。你手动 .append() 进去也不会生效，除非再用 <style></style> 标签包裹并插入 —— 但这绕过了浏览器原生的 CSS 加载机制，丢失了缓存、媒体查询、@import 解析等能力。

$.get("theme.css") 拿到的是纯文本，$("#target").html(data) 只是把文本当 HTML 渲染，不触发样式解析
即使用 $("<style>").text(data).appendTo("head")</style>，也无法支持 @media、@font-face 的完整行为，且无缓存
老项目 jQuery 版本（如 1.12 / 2.1）不提供 $.loadCSS() 这类封装，得自己写轻量逻辑

推荐做法：动态创建 `<link>` 标签并插入

这是最接近原生 <link rel="stylesheet"> 的方式，兼容 IE9+，支持缓存、HTTP 头、preload 等标准行为。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

用 $("<link>", { rel: "stylesheet", type: "text/css", href: "path/to/style.css" }) 构造元素
务必 .appendTo("head")，不能插到或任意 div 中（否则无效）
可加 id 属性用于后续查重：id: "theme-v2"，避免重复引入同一份 CSS
若需监听加载完成，老版 jQuery 不支持 onload 事件绑定（IE8- 不支持），可用 link.onload = function(){...}，但 IE9+ 才可靠；更稳妥的做法是定时检测 document.styleSheets 中是否已存在该 CSS 的 href

示例：

$("<link>", {
  rel: "stylesheet",
  type: "text/css",
  href: "/css/dark-theme.css",
  id: "dark-theme-css"
}).appendTo("head");

容易踩的坑：跨域、重复加载、IE 兼容性

老项目常跑在 IE10/11 下，而动态 <link> 在 IE 中有特殊限制：

跨域 CSS（如 CDN 上的样式）会被 IE 阻止加载，且不抛 JS 错误，只静默失败 —— 必须确保同源，或服务端配 Access-Control-Allow-Origin
重复插入相同 href 的 <link> 会导致多次请求，建议先查重：if (!document.getElementById("dark-theme-css")) { ... }
IE9 不支持 link.onload，但支持 link.onreadystatechange，状态为 "loaded" 或 "complete" 时才算加载完毕
不要在 $(document).ready() 里延迟插入 —— 若 CSS 影响首屏渲染，应尽早执行（比如放在末尾的 script 中）