如何通过JS实现仅当变量>15且屏幕≤1000px时隐藏指定元素？

这问题我之前也碰到过，CSS媒体查询确实没法直接结合JS变量做判断，用JS同时监听窗口尺寸和变量状态就能解决，给你一套具体的实现方案：

首先调整CSS逻辑，改成用类来控制隐藏，这样JS可以灵活开关这个类：

/* 定义隐藏元素的通用类 */
.hide-element {
  display: none !important;
}

/* 注释掉原来的媒体查询，换成JS来控制 */
/* @media (max-width: 1000px){
  #specific-id{
     display:none
   }
} */

接下来是JS核心逻辑，咱们要同时检查窗口宽度和变量值，动态给目标元素添加/移除隐藏类：

// 替换成你实际使用的变量（这里是示例值）
let myVariable = 20;

// 获取需要控制的目标元素
const targetElement = document.getElementById('specific-id');

// 封装判断逻辑的函数，方便重复调用
function updateElementVisibility() {
  // 同时满足两个条件：窗口宽度≤1000px，且变量值大于15
  const shouldHide = window.innerWidth <= 1000 && myVariable > 15;
  
  // 根据判断结果切换隐藏类
  if (shouldHide) {
    targetElement.classList.add('hide-element');
  } else {
    targetElement.classList.remove('hide-element');
  }
}

// 页面加载时先执行一次，确保初始状态正确
updateElementVisibility();

// 监听窗口大小变化，每次调整窗口都重新判断状态
window.addEventListener('resize', updateElementVisibility);

// 重要提示：如果你的变量会动态变化（比如用户操作改变它），一定要在变量更新后调用这个函数
// 示例：当变量值改变时
// myVariable = 16;
// updateElementVisibility();

额外说明 #

• 用!important是为了确保隐藏样式能覆盖元素原本的display属性，如果你的元素没有高优先级的display样式，也可以去掉它。
• 相比直接修改元素的style.display，用类控制的方式更符合CSS与JS分离的原则，后续要调整隐藏效果（比如改成渐变隐藏），直接改CSS类就行，不用动JS。
• 如果你的变量是从后端获取或者通过其他逻辑动态生成的，只要保证在调用updateElementVisibility()之前变量已经赋值即可。

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