17370845950

JavaScript 可动态检测运行时条件（如屏幕宽度、暗色模式等）并插入 link 标签按需加载 CSS；需去重、监听 load 事件、支持 preload 优化，且注意异步延迟与 SSR 兼容性。

可以通过 JavaScript 检测运行时条件（比如设备类型、屏幕宽度、用户偏好、URL 参数等），然后动态创建 标签插入到 中，实现按需加载 CSS 文件。

判断条件并加载对应 CSS

核心思路是：用 JS 获取条件 → 构造 link 元素 → 设置 href 和属性 → 插入 head。

• 检测屏幕宽度加载响应式主题：
  

  if (window.innerWidth < 768) {
    loadCSS('mobile.css');
  } else {
    loadCSS('desktop.css');
  }

• 检测 prefers-color-scheme 暗色模式：
  

  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    loadCSS('dark-theme.css');
  } else {
    loadCSS('light-theme.css');
  }

• 简单封装加载函数：
  

  function loadCSS(href) {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = href;
    document.head.appendChild(link);
  }

避免重复加载和确保加载完成

多次调用可能重复插入相同样式表，建议加去重逻辑；如需依赖样式就绪后再执行后续操作，可监听 load 事件。

• 检查是否已存在同名 CSS：
  

  function loadCSS(href) {
    if (document.querySelector(`link[href="${href}"]`)) return;
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = href;
    document.head.appendChild(link);
  }

• 加载完成后回调（适用于依赖样式的 JS 逻辑）：
  

  link.onload = () => console.log('CSS loaded');
  link.onerror = () => console.error('CSS load failed');

支持异步与预加载优化

现代浏览器支持 rel="preload" 提前获取资源，再切换为 stylesheet，提升性能。

• 先预加载，再激活：
  

  const link = document.createElement('link');
  link.rel = 'preload';
  link.as = 'style';
  link.href = 'theme.css';
  link.onload = () => {
    link.rel = 'stylesheet';
  };
  document.head.appendChild(link);

• 配合 media 属性做条件加载（无需 JS）：
  
  注意： 这种方式由浏览器原生处理，不触发 JS，但条件有限（仅支持媒体查询）。

兼容性与注意事项

动态加载 CSS 在所有现代浏览器中均支持，IE9+ 也可用。需注意以下几点：

• CSS 加载是异步的，样式生效有延迟，避免在插入后立即读取元素 computedStyle
• 动态插入的 CSS 会参与层叠，顺序取决于插入时机，必要时可控制 的位置
• 服务端渲染（SSR）场景下，JS 尚未执行，首屏仍需内联关键样式或预置基础 CSS
• 如需热切换主题，记得移除旧样式表：document.querySelector('link[title="theme"]').remove()