jquery - 确定 html 元素的可见性/真实 z-index

Question

是否可以确定 html 元素是否对用户可见？

例子

页面有一个带日期选择器的输入字段。如果用户单击输入字段，则会出现另一个 div，允许用户选择所需的日期。

只要日期选择器可见，它就会隐藏它后面的元素。我需要一种方法来判断元素是否隐藏。

第一种方法

一种方法是检查和比较 z-index 值。但是如果它们被显式设置，它们总是auto。

另一种方法是检查元素是否对用户可见。但我想不出任何办法。

:visible 选择器在这种情况下不起作用，因为该元素仅对用户隐藏但仍然可见。

有什么建议吗？

Answer 1

我尝试了一种不同的方法，使用元素坐标 (getBoundingClientRect)，然后使用 elementFromPoint 查看元素是隐藏还是可见。

DEMO (按照右侧的说明进行操作)

        var rectPos = this.getBoundingClientRect();

        var result = 0;
        if (this == document.elementFromPoint(rectPos.left, 
                                                    rectPos.top)) {
            result++;
        }
        if (this == document.elementFromPoint(rectPos.left, 
                                                    rectPos.bottom - 1)) {
            result++;
        }
        if (this == document.elementFromPoint(rectPos.right - 1, 
                                                     rectPos.top)) {
            result++;
        }
        if (this == document.elementFromPoint(rectPos.right - 1, rectPos.bottom - 1)) {
            result++;
        }

        if (result == 4) {
            result = 'visible';
        } else if (result == 0) {
            result = 'hidden';
        } else {
            result = 'partially visible';
        }

进一步阅读: getBoundingClientRect , elementFromPoint