css页面需要按条件加载样式怎么办_通过js判断条件动态引入css

P粉602998670 2025-12-29 00:00:00 次阅读

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);