如何使用 jQuery 检查元素是否隐藏

在 web 开发中，判断元素是否隐藏是一个常见需求。虽然已有不少方法可供选择，但通常它们并不完全适合所有场景。因此，我写了一个更为全面的函数来处理这一问题。

测试用例

检查整个文档是否隐藏： 确保文档本身没有被隐藏。
检查元素的宽度、高度、透明度或是否包含 display: none / visibility: hidden 内联样式： 多个因素可能导致元素不可见，这里要逐个确认。
检查元素中心是否被其他元素（或其祖先元素）或屏幕边缘遮挡： 这是因为只检测外部样式不够，还要考虑布局中可能存在的遮挡。
检查元素的宽度、高度、透明度或 display: none / visibility: hidden 计算样式： 计算样式是所有祖先元素综合作用的结果，因此也需要检测。

使用环境

这个方法在多种浏览器和操作系统上进行了测试，具体包括：

Android 4.4 (原生浏览器/Chrome/Firefox)
Windows/Mac上的Firefox、Chrome、Opera（Presto 和 WebKit）
Internet Explorer (IE 5-11 和 IE 8 虚拟机)
Safari（Windows/Mac/iOS）

代码实现

下面是具体的代码实现：

var is_visible = (function () {
  var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0,
    y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0,
    relative = !!((!x && !y) || !document.elementFromPoint(x, y))
  function inside(child, parent) {
    while (child) {
      if (child === parent) return true
      child = child.parentNode
    }
    return false
  }
  return function (elem) {
    if (
      document.hidden ||
      elem.offsetWidth == 0 ||
      elem.offsetHeight == 0 ||
      elem.style.visibility == 'hidden' ||
      elem.style.display == 'none' ||
      elem.style.opacity === '0'
    )
      return false
    var rect = elem.getBoundingClientRect()
    if (relative) {
      if (
        !inside(
          document.elementFromPoint(
            rect.left + elem.offsetWidth / 2,
            rect.top + elem.offsetHeight / 2
          ),
          elem
        )
      )
        return false
    } else if (
      !inside(
        document.elementFromPoint(
          rect.left + elem.offsetWidth / 2 + window.pageXOffset,
          rect.top + elem.offsetHeight / 2 + window.pageYOffset
        ),
        elem
      ) ||
      rect.top + elem.offsetHeight / 2 < 0 ||
      rect.left + elem.offsetWidth / 2 < 0 ||
      rect.bottom - elem.offsetHeight / 2 >
        (window.innerHeight || document.documentElement.clientHeight) ||
      rect.right - elem.offsetWidth / 2 >
        (window.innerWidth || document.documentElement.clientWidth)
    )
      return false
    if (window.getComputedStyle || elem.currentStyle) {
      var el = elem,
        comp = null
      while (el) {
        if (el === document) {
          break
        } else if (!el.parentNode) return false
        comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle
        if (
          comp &&
          (comp.visibility == 'hidden' ||
            comp.display == 'none' ||
            (typeof comp.opacity !== 'undefined' && comp.opacity != 1))
        )
          return false
        el = el.parentNode
      }
    }
    return true
  }
})()

如何使用

为了使用这个函数，只需传入要检测的元素：

is_visible(elem) // 返回布尔值

这个方法会返回一个布尔值，表示元素是否可见。通过这种方法，你可以更全面和准确地判断元素的可见性。

总结

在实际开发中，确认元素是否可见是一个复杂但关键的任务。本篇文章提供的代码不仅考虑了元素的内联样式，还检测了其在文档中的位置及其祖先元素的影响，希望能为你提供有效的帮助。如有任何问题或建议，欢迎在评论区留言。