如何让JavaScript样式像CSS一样实现实时更新？

核心问题 #

你的代码里resize事件绑定犯了关键错误：你直接调用了CheckWindow()，而不是传递函数引用给事件监听器。这导致函数只在页面加载时执行一次，窗口调整时不会触发，所以必须刷新页面才生效。另外，原CheckWindow函数只处理了窗口非最大化时隐藏菜单，但最大化时没有恢复显示的逻辑，也没考虑窗口最小化的情况。

为什么JS不像CSS媒体查询自动实时更新？ #

CSS媒体查询是浏览器内置的自动监听机制，浏览器会持续跟踪视口尺寸变化，自动匹配对应的样式规则并应用。而JavaScript需要开发者手动绑定特定事件（比如resize、visibilitychange等），在事件触发时执行自定义逻辑——不是JS做不到实时，而是你需要正确设置触发时机。

修复后的完整代码 #

JavaScript部分 #

let events = ["contextmenu"];
let contextMenu = document.getElementById("context-menu");

// 右键菜单定位逻辑
events.forEach((eventType) => {
  document.addEventListener(
    eventType,
    (e) => {
      e.preventDefault();

      let mouseX = e.clientX || e.touches?.[0].clientX;
      let mouseY = e.clientY || e.touches?.[0].clientY;

      if (!mouseX || !mouseY) return;

      let menuHeight = contextMenu.getBoundingClientRect().height;
      let menuWidth = contextMenu.getBoundingClientRect().width;

      let width = window.innerWidth;
      let height = window.innerHeight;

      if (width - mouseX <= 50) {
        contextMenu.style.left = `${width - menuWidth}px`;
        contextMenu.style.top = `${mouseY}px`;

        if (height - mouseY <= 50) {
          contextMenu.style.top = `${mouseY - menuHeight}px`;
        }
      } else {
        contextMenu.style.left = `${mouseX}px`;
        contextMenu.style.top = `${mouseY}px`;
        if (height - mouseY <= 50) {
          contextMenu.style.top = `${mouseY - menuHeight}px`;
        }
      }
      contextMenu.style.visibility = "visible";
      // 确保display是block，避免之前隐藏后无法显示
      contextMenu.style.display = "block";
    }, {
      passive: false
    }
  );
});

// 点击空白处隐藏菜单
document.addEventListener("click", function(e) {
  if (!contextMenu.contains(e.target)) {
    contextMenu.style.visibility = "hidden";
  }
});

// 正确绑定resize事件：传递函数引用，不要加括号
window.addEventListener('resize', CheckWindow);
// 监听窗口最小化/恢复事件
document.addEventListener('visibilitychange', CheckWindow);

function CheckWindow() {
  const isMaximized = screen.availWidth === window.outerWidth && screen.availHeight === window.outerHeight;
  const isMinimized = document.hidden || window.innerWidth === 0 || window.innerHeight === 0;

  if (isMaximized) {
    // 最大化时显示菜单（确保display和visibility正确）
    contextMenu.style.display = "block";
  } else if (isMinimized || !isMaximized) {
    // 非最大化或最小化时隐藏菜单
    contextMenu.style.display = "none";
    contextMenu.style.visibility = "hidden";
  }
}

// 页面加载时先执行一次，初始化状态
CheckWindow();

CSS部分（仅调整关键样式，其余保留） #

.context-menu {
  position: fixed;
  visibility: hidden;
  display: block; /* 默认设置为block，用JS控制display来隐藏 */
}

HTML部分（无需修改） #

<div id="context-menu" class="context-menu">
  <ul class="menu">
    <li class="share item"><i class="fa fa-share"></i> Share</li>
    <li class="rename item"><i class="fa fa-pencil"></i> Rename</li>
    <li class="link item"><i class="fa fa-link"></i> Copy Link Address</li>
    <li class="copy item"><i class="fa fa-copy"></i> Copy to</li>
    <li class="paste item"><i class="fa fa-paste"></i> Move to</li>
    <li class="download item"><i class="fa fa-download"></i> Download</li>
    <li class="trash item"><i class="fa fa-trash"></i> Delete</li>
  </ul>
</div>

关键优化点 #

• 修复resize事件绑定：将CheckWindow()改为CheckWindow，传递函数引用，确保窗口调整时触发。
• 增加窗口状态判断：加入isMinimized判断，处理窗口最小化的情况。
• 完善显示逻辑：最大化时恢复菜单的display属性，避免之前隐藏后无法显示。
• 初始化执行：页面加载时执行一次CheckWindow，确保初始状态正确。
• 容错处理：对触摸事件的touches做可选链判断，避免报错。

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