如何通过JavaScript插入和移除CSS文件，实现非@media事件触发的CSS文件切换

嘿，这个需求我之前做项目时刚好碰到过！当CSS的@media媒体查询满足不了自定义事件（比如用户点击按钮、滚动到特定区域、状态切换这类非视口尺寸触发的事件）的样式切换需求时，用JS直接操作CSS文件是最直接且简洁的方案，下面给你分享几种实用的写法：

方法一：直接修改已有link标签的href（最紧凑） #

如果你的页面里已经有一个用于动态切换的样式表入口，可以直接通过修改它的href属性来切换，代码最少：

首先在HTML里预留一个带ID的link标签：

<link id="dynamic-style" rel="stylesheet" href="default.css">

然后写一个极简的切换函数：

function switchCSS(newHref) {
  const styleEl = document.getElementById('dynamic-style');
  if (styleEl) styleEl.href = newHref;
}

用的时候直接调用就行，比如绑定按钮点击事件：

// 点击切换到深色主题样式
document.querySelector('#dark-mode-btn').addEventListener('click', () => {
  switchCSS('dark-theme.css');
});

方法二：移除旧样式表 + 添加新样式表（适合多文件切换） #

如果需要同时管理多个可选的CSS文件，避免样式冲突，可以先移除旧的动态样式表，再添加新的：

// 移除所有标记为动态样式的link标签
function clearDynamicStyles() {
  document.querySelectorAll('.dynamic-css').forEach(el => el.remove());
}

// 添加新的动态样式表
function addDynamicStyle(href) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = href;
  link.className = 'dynamic-css'; // 标记为动态样式，方便后续移除
  document.head.appendChild(link);
}

// 合并成切换函数
function switchCSS(newHref) {
  clearDynamicStyles();
  addDynamicStyle(newHref);
}

进阶技巧：缓存已加载的样式表 #

如果需要频繁切换，为了避免重复请求CSS文件，可以缓存已经创建过的link元素，提升性能：

const styleCache = {}; // 缓存已创建的样式表元素

function switchCSS(newHref) {
  clearDynamicStyles();
  if (styleCache[newHref]) {
    // 直接复用缓存的元素，不用重新请求
    document.head.appendChild(styleCache[newHref]);
  } else {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = newHref;
    link.className = 'dynamic-css';
    styleCache[newHref] = link;
    document.head.appendChild(link);
  }
}

这种方式逻辑清晰，代码也足够紧凑，不管是用户交互、自定义状态变化还是其他非媒体查询触发的场景都能完美适配~

备注：内容来源于stack exchange，提问作者enco m