确定html元素的可见性/实际z-index [英] Determine visibility / real z-index of html elements

问题描述

是否可以确定用户是否可以看到html元素？

示例

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

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

第一种方法

一种方法是检查并比较 z-index 值。但是，如果他们被明确设置，他们总是 auto 。

另一种方法可能是检查是否一个元素对用户是可见的。但我想不出有什么办法。

：visible 选择器在此不起作用情况，因为元素只隐藏在用户的眼睛中，但仍然可见。

有什么建议？

解决方案

这个可能工作。我没有测试过它。这是我发现的一些代码的修改版本

  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&& 
（ （elemPossiblyCovering.offsetTop + elemPossiblyCovering.offsetHeight）&& 
（left + width）< =（elemPossiblyCovering.offsetLeft + elemPossiblyCovering.offsetWidth）
）; 
} 
  

所以它会是这样的：

  if（elementWithinElement（myTextbox，theDatepickerDiv））
 {
 //隐藏
} else 
 {
 //这是可见的
} 
  

编辑：某些代码不是更新。现在应该修复。

再次编辑：修复代码并对其进行测试。它的工作原理！

Is it possible to determine if an html element is visible to the user?

Example

A page has an input field with a datepicker. If the user clicks on the input field, another div appears which allows the user to select the desired date.

As long the datepicker is visible it hides elements which are behind it. I need a way to tell if an element is hidden or not.

First Approach

One way would be to check and compare the z-index values. But if they are note explicitly set, they are always auto.

Another way could be a way to check if an element is visible to the user. But i can't think of any way to do so.

The :visible selector does not work in this situation, because the element is only hidden to the user's eyes but still visible.

Any suggestions?

解决方案

This might work. I haven't tested it. It's a modified version of some code I found 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)
  );
}

So it'd be something like:

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

Edit: Some of the code wasn't updated. Should be fixed now.

Edit Again: Fixed the code and tested it. It works!

这篇关于确定html元素的可见性/实际z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！