实施例

页面有一个带有datepicker的输入字段。如果用户单击输入字段，则会出现另一个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

Answer 2

此可能有效。我没有测试过。它是我发现here的一些代码的修改版本。

function elementWithinElement(elemPossiblyCovered, elemPossiblyCovering)
{
    var top = elemPossiblyCovered.offsetTop;
    var left = elemPossiblyCovered.offsetLeft;
    var width = elemPossiblyCovered.offsetWidth;
    var height = elemPossiblyCovered.offsetHeight;

    while (elemPossiblyCovered.offsetParent)
    {
        elemPossiblyCovered = elemPossiblyCovered.offsetParent;
        top += elemPossiblyCovered.offsetTop;
        left += elemPossiblyCovered.offsetLeft;
    }

    return (
    top >= elemPossiblyCovering.offsetTop &&
    left >= elemPossiblyCovering.offsetLeft &&
    (top + height) <= (elemPossiblyCovering.offsetTop + elemPossiblyCovering.offsetHeight) &&
    (left + width) <= (elemPossiblyCovering.offsetLeft + elemPossiblyCovering.offsetWidth)
  );
}

所以它会像：

if(elementWithinElement(myTextbox, theDatepickerDiv))
{ 
    // It's hidden
}else
{
    //It's visible
}

编辑：部分代码未更新。现在应该修好。

再次编辑：修复了代码并对其进行了测试。它有效！

Answer 3

我能想到的唯一方法是获取每个项目的偏移量，并检查新项目的偏移量是否在以前的任何偏移量之内。显然，只有它背后的理论做出那样做的事情需要很长时间。祝你好运：）

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

实施例

第一种方法

3 个答案: