通过JS动态切换CSS文件遇错求助：TypeError及currentStyleSheet为null问题

错误原因分析 #

你的代码存在三个核心问题：

1. 重复创建节点：每次点击按钮都会新建mobileLink并添加到<head>，导致DOM中可能存在多个相同的移动端样式表链接。
2. 引用丢失：第一次点击移除styles2.css的链接后，currentStyleSheet会变成null；第二次点击进入else分支时，尝试将null添加到DOM，触发TypeError。
3. 逻辑冲突：点击时先添加移动端样式表，再查询并操作两个样式表，导致状态混乱。

解决方案 #

方案一：通过disabled属性切换（推荐，性能更优）

这种方式无需频繁添加/移除DOM节点，仅通过切换样式表的禁用状态实现切换，样式表只会加载一次。

先确保页面初始加载桌面端样式（可直接写在HTML中）：

<link rel="stylesheet" href="styles2.css" id="desktop-style">

然后编写JS代码：

// 初始化获取或创建桌面端样式链接
const desktopLink = document.getElementById('desktop-style') || (() => {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.type = 'text/css';
  link.href = 'styles2.css';
  link.id = 'desktop-style';
  document.head.appendChild(link);
  return link;
})();

// 创建并初始化移动端样式链接（初始禁用）
const mobileLink = (() => {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.type = 'text/css';
  link.href = 'styles-no-media-query.css';
  link.id = 'mobile-style';
  link.disabled = true;
  document.head.appendChild(link);
  return link;
})();

// 获取按钮文本元素（根据你的实际DOM结构调整选择器）
const btnText = document.querySelector('.btn-text');

mobileBtn.addEventListener('click', () => {
  // 切换两个样式表的禁用状态
  desktopLink.disabled = !desktopLink.disabled;
  mobileLink.disabled = !mobileLink.disabled;

  // 切换按钮显示文本
  btnText.textContent = desktopLink.disabled ? 'Desktop Preview' : 'Mobile Preview';
});

方案二：通过节点添加/移除切换（保存引用避免查询DOM）

提前创建两个样式表链接并保存引用，用变量跟踪当前激活状态，避免每次点击去DOM中查询节点。

// 创建两个样式表链接并保存引用
const desktopLink = document.createElement('link');
desktopLink.rel = 'stylesheet';
desktopLink.type = 'text/css';
desktopLink.href = 'styles2.css';

const mobileLink = document.createElement('link');
mobileLink.rel = 'stylesheet';
mobileLink.type = 'text/css';
mobileLink.href = 'styles-no-media-query.css';

// 初始添加桌面端样式
document.head.appendChild(desktopLink);
let currentActive = 'desktop';

// 获取按钮文本元素
const btnText = document.querySelector('.btn-text');

mobileBtn.addEventListener('click', () => {
  if (currentActive === 'desktop') {
    // 切换到移动端样式
    desktopLink.remove();
    document.head.appendChild(mobileLink);
    btnText.textContent = 'Desktop Preview';
    currentActive = 'mobile';
  } else {
    // 切换到桌面端样式
    mobileLink.remove();
    document.head.appendChild(desktopLink);
    btnText.textContent = 'Mobile Preview';
    currentActive = 'desktop';
  }
});

内容的提问来源于stack exchange，提问作者BigMoves