如何在 jQuery 中检查一个元素是否隐藏

在前端开发中，我们常常需要判断一个元素是否隐藏。在 jQuery 中，有多种方式可以实现这一点。然而，并不是所有的解决方案都适用于所有情况。为此，我写了一个通用的解决方案来应对各种复杂情形。本文将详细介绍这个方法及其使用方式。

测试条件

为了确保代码的通用性，该方法涵盖以下几种情况：

检测文档是否隐藏： 有时整个文档处于隐藏状态，例如在某些浏览器的背景标签页中。
测试元素的宽度、高度、透明度以及内联样式中的 display:none 和 visibility:hidden： 如果元素的宽度或高度为零，透明度为零，或者内联样式设置为 display:none 或 visibility:hidden，则该元素被认为是隐藏的。
检测元素中心点是否被其他元素遮挡： 如果元素的中心被其他元素（例如具有 overflow:hidden、滚动或覆盖的元素）或屏幕边缘遮挡，该元素也被视为隐藏。
检测计算样式中的宽度、高度、透明度以及 display:none 和 visibility:hidden： 同时会检查所有祖先元素的这些属性，以确保任何一个包含祖先元素设置为隐藏状态时，当前元素都被视为隐藏。

适用的浏览器

该方法在多个平台和浏览器上进行了测试，包括：

Android 4.4 (原生浏览器/Chrome/Firefox)
Firefox (Windows/Mac)
Chrome (Windows/Mac)
Opera (Presto 引擎/ Mac WebKit)
Internet Explorer (IE 5-11 文档模式，以及虚拟机上的 IE 8)
Safari (Windows/Mac/iOS)

代码实现

下面是实现这一功能的 JavaScript 代码。请确保在您的项目中引入 jQuery 库。

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;};
})();