JS设置内联高度导致@media媒体查询修改div高度失效怎么解决？

方案一：使用CSS类切换代替直接修改内联样式（推荐） #

从根源规避内联样式优先级过高的问题，不用JS直接操作元素的style属性，而是通过切换类名控制菜单展开状态，后续维护成本更低：
首先调整CSS规则：

/* 菜单默认收起状态 */
#menu-bar {
  height: 70px;
  transition: height 0.3s ease; /* 可选，添加展开收起过渡动画 */
}
/* 菜单展开状态专用类 */
#menu-bar.menu-expanded {
  height: 505px;
}
/* 大屏下强制重置为收起状态 */
@media screen and (min-width: 1301px) {
  #menu-bar {
    height: 70px !important;
  }
}

再修改JS逻辑为切换类：

function showMenu() {
    var mb = document.getElementById("menu-bar");
    mb.classList.toggle("menu-expanded");
}

方案二：快速修复（不改动现有JS逻辑） #

如果不想调整现有JS代码，直接在你的媒体查询规则里添加!important提升CSS优先级，即可覆盖JS设置的内联样式：

@media screen and (min-width: 1301px) {
    #menu-bar {
        height: 70px !important;
    }
}

该改法最快，仅适合这种明确需要全局覆盖的固定场景，不建议滥用!important。

方案三：JS监听窗口尺寸主动重置 #

不想调整CSS的情况下，可以监听窗口resize事件，当宽度达到大屏阈值时主动重置菜单状态：

window.addEventListener("resize", function() {
  // 性能敏感场景可自行添加防抖逻辑
  if (window.innerWidth >= 1301) {
    var mb = document.getElementById("menu-bar");
    mb.style.height = "70px";
  }
})

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