Firefox开发者工具中sketch.css样式表重复显示问题解决咨询

问题本质 #

这不是你的代码实现问题，是Firefox开发者工具的显示bug。实际浏览器并没有重复加载sketch.css，只是DevTools的样式表列表会把每次启用操作记录成一条新条目，但内核只会加载一次样式表，不会产生额外的网络请求（可以通过网络面板验证：切换时不会有新的sketch.css请求）。

解决方法 #

如果在意DevTools列表的整洁性，可以改用动态添加/移除<link>元素的方式替代切换disabled属性：

const header = document.querySelector('header');
const SKETCH_LINK_ID = 'sketch';

header.onclick = () => {
  const existingLink = document.getElementById(SKETCH_LINK_ID);
  if (existingLink) {
    // 移除已存在的样式表
    existingLink.remove();
  } else {
    // 创建并插入新的样式表元素
    const newLink = document.createElement('link');
    newLink.id = SKETCH_LINK_ID;
    newLink.rel = 'stylesheet';
    newLink.type = 'text/css';
    newLink.href = 'styles/sketch.css';
    document.head.appendChild(newLink);
  }
};

注意：如果原本HTML里预先写了<link id="sketch">，需要删掉它，让脚本负责初始状态的添加（如果默认要启用，就在页面加载时执行一次添加逻辑）。

如果功能正常且不在意DevTools的显示问题，完全可以继续使用原来的代码——因为它没有性能问题，只是工具显示的小bug而已。

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