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

JKooll

于 2024-05-27 21:51:51 发布

阅读量675

点赞数 5

分类专栏： JavaScript 百问百答文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/jkol12/article/details/139240149

版权

JavaScript 百问百答专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在前端开发中，我们常常需要判断一个元素是否隐藏。在 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;
    };
})();