不能用JS动态拼接的href属性，因其在HTML解析阶段已固化，运行时修改不会触发浏览器重新加载CSS；真正可行的方式是通过JS创建新元素并插入，同时移除旧链接，并监听onload/onerror确保加载成功。
<link> 标签的 href 属性不支持运行时动态拼接——它在 HTML 解析阶段就已确定，DOM 渲染后无法靠 JS 修改路径并触发浏览器重新加载 CSS。
为什么不能用 JS 拼接 <link href="%24%7Bbase%7D/style.css">
这是常见误解。模板字符串、innerHTML 插入或直接赋值 link.href = new URL(...).href 都不会让浏览器重新 fetch 并解析新样式表。浏览器只在初始解析或 rel 切换（如 rel="alternate stylesheet"）时加载资源。强行改 href 只会断开旧连接，不建立新连接，页面样式立即失效且无报错。
- Vue/React 中写
<link :href="cssPath">是框架模拟的 DOM 更新，实际仍靠首次渲染时生成静态href，后续更新无效 - 服务端模板（如 Freemarker、Django）可拼接，但那是 HTML 生成阶段，不是“前端动态”
- 用
document.write("<link href="...">")已被现代浏览器禁用或仅限同步脚本早期执行
真正可行的动态 CSS 加载方式
要根据环境、主题或用户偏好切换样式，必须用脚本主动创建 <link> 并插入 ，同时移除旧的。
- 用
new URL("./theme-dark.css", import.meta.url)构造绝对路径，避免相对路径解析错误（比如当前页是/user/profile，href="./theme.css"会被解析成/user/theme.css） - 给每个
<link>加唯一id（如id="app-theme"），方便后续替换：document.getElementById("app-theme")?.remove() - 插入后监听
link.onload和link.onerror，不要假设加载一定成功
const link = document.createElement('link')
link.rel = 'stylesheet'
link.id = 'app-theme'
link.href = new URL('./themes/dark.css', import.meta.url).href
link.onload = () => console.log('dark theme loaded')
link.onerror = () => console.error('failed to load dark.css')
document.head.appendChild(link)
<base> 标签能简化路径吗？
可以，但风险高。一旦设置 <base href="/">，所有 href、src、表单 action 都以它为基准。问题在于：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- SPA 路由切换（如从
/dashboard到/settings）后，<base>不会自动更新，但用户可能刷新页面，此时<base>仍有效，导致所有相对路径都指向根 - Django/Flask 等后端若动态生成
<base href="%7B%7B%20request.path%20%7D%7D">是严重错误——request.path是路径部分，不含协议和 host，会导致跨域请求 - 更安全的做法是统一用根相对路径：
href="/assets/css/main.css"，明确以/开头
开发与生产环境路径不一致怎么办
根本矛盾不在 HTML，而在构建流程。Webpack/Vite 会把 import './index.css' 编译成带 hash 的文件名，并注入 <link href="/assets/index.abc123.css">；而本地开发时用的是未压缩、无 hash 的路径。手动维护两套 <link> 容易出错。
- 不要在 HTML 中硬编码 CSS 路径，交给构建工具注入
- 如果必须手写（如纯静态站点），用环境变量 + 构建时替换：Vite 的
define或 Webpack 的DefinePlugin把__CSS_PATH__替换为实际路径 - 禁止用 JS 在运行时读取
process.env.NODE_ENV再拼接——该变量在浏览器端不存在，会被替换成字符串字面量
最常被忽略的一点：CSS 加载是异步的，但它的规则生效时机不可控。如果你在 JS 中修改了 class 后立刻读取 getComputedStyle，很可能拿到旧值。需要等 link.onload 触发后再操作 DOM，或用 document.fonts.load() 等字体就绪信号作为间接判断依据。
