通过JavaScript修改CSS样式表，修复内联CSS导致的媒体查询失效问题

我明白你的痛点——用内联样式修改元素显示状态后，媒体查询的规则直接被覆盖了，这确实会破坏响应式设计的逻辑。问题出在内联样式的优先级远高于外部样式表和媒体查询，一旦你给元素加上了style="display: none"，后续媒体查询里的display规则根本没法生效。

下面给你两种实用的解决方案，优先推荐第一种，更符合现代前端的最佳实践：

方案一：用CSS类切换显示状态（最推荐） #

这种方式让JavaScript只负责添加/移除类，所有样式逻辑都留在CSS里，完美兼容媒体查询。

步骤1：编写CSS规则 #

先定义好不同屏幕尺寸下的默认样式，再写一个控制显示的类：

/* 大屏幕（>768px）下的默认状态：侧边栏显示，切换按钮隐藏 */
.sidebar {
  display: block;
}
.toggle-btn {
  display: none;
}

/* 小屏幕（≤768px）下的默认状态：侧边栏隐藏，切换按钮显示 */
@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
  .toggle-btn {
    display: block;
  }
  /* 小屏幕下，添加show类后显示侧边栏 */
  .sidebar.show {
    display: block;
  }
}

步骤2：JavaScript控制类的切换 #

只需要给按钮绑定点击事件，切换侧边栏的show类即可：

const toggleBtn = document.querySelector('.toggle-btn');
const sidebar = document.getElementById('foo');

toggleBtn.addEventListener('click', () => {
  sidebar.classList.toggle('show');
});

这样做的好处是：当屏幕尺寸变化时，媒体查询的规则依然会正常生效——比如从小屏幕切换到大屏幕时，toggle-btn会自动隐藏，sidebar也会回到默认的display: block状态，完全不受之前的类操作影响。

方案二：直接修改CSS样式表规则（不推荐，仅作了解） #

如果你确实需要直接修改样式表的属性，可以通过操作document.styleSheets来实现，但这种方法比较繁琐，维护性差，只适合特殊场景。

比如修改全局样式表中.sidebar的display属性：

// 获取页面中的第一个样式表（根据实际情况调整索引）
const styleSheet = document.styleSheets[0];

// 遍历所有规则，找到目标选择器
for (let i = 0; i < styleSheet.cssRules.length; i++) {
  const rule = styleSheet.cssRules[i];
  
  // 处理普通规则
  if (rule.selectorText === '.sidebar') {
    rule.style.display = 'none';
    break;
  }
  
  // 处理媒体查询里的规则
  if (rule.type === CSSRule.MEDIA_RULE && rule.media.mediaText.includes('max-width: 768px')) {
    for (let j = 0; j < rule.cssRules.length; j++) {
      const mediaRule = rule.cssRules[j];
      if (mediaRule.selectorText === '.sidebar') {
        mediaRule.style.display = 'none';
        break;
      }
    }
  }
}

这种方法需要准确找到对应的样式规则，一旦样式表结构变化，代码就会失效，所以一般不推荐使用。

为什么内联样式会失效？ #

简单来说，CSS的优先级（特异性）规则是：内联样式 > ID选择器 > 类/伪类/属性选择器 > 标签选择器。媒体查询不会改变优先级，只是在特定屏幕条件下应用规则。所以当你用element.style.display设置内联样式后，媒体查询里的display规则优先级不够，根本无法覆盖它。

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