纯JavaScript中等价于jQuery('#myModal:visible').length===0的写法咨询

首先得明确：原jQuery代码判断的是**#myModal要么不存在于DOM中，要么存在但不可见**（符合jQuery对:visible的定义）。你之前的代码报错是因为没处理元素不存在的情况，而后来的代码只处理了元素不存在的场景，漏掉了元素存在但隐藏的情况。

下面是完全等价的纯JS实现，同时覆盖两种场景：

const element = document.querySelector("#myModal");

// 元素不存在，或者元素存在但不可见
return !element || !isElementVisible(element);

// 辅助函数：对齐jQuery的:visible判定逻辑
function isElementVisible(el) {
  const computedStyle = window.getComputedStyle(el);
  
  // 先排除display:none或visibility:hidden的情况
  if (computedStyle.display === 'none' || computedStyle.visibility === 'hidden') {
    return false;
  }
  
  // 再检查元素是否有实际的宽高（jQuery会把宽高为0的元素视为:hidden）
  const rect = el.getBoundingClientRect();
  return rect.width > 0 && rect.height > 0;
}

为什么你之前的代码报错？ #

当#myModal不存在时，document.querySelector会返回null，而window.getComputedStyle不能接收null作为参数，所以直接调用就会抛出TypeError。必须先判断元素是否存在，再去获取它的计算样式。

简化版（如果你的模态框只通过display控制显隐） #

如果你的模态框仅用display: none/display: block来控制显示隐藏，不需要考虑visibility或宽高的情况，可以简化成：

const element = document.querySelector("#myModal");
return !element || window.getComputedStyle(element).display === 'none';

这个写法更简洁，也能满足大部分模态框的场景。

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