jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – 确定html元素的可见性/实际z-index大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以确定用户是否可以看到html元素?

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

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

第一种方法

一种方法是检查和比较z-index值.但如果明确设置它们,它们总是自动的.

另一种方法可以是检查元素是否对用户可见的方法.但我想不出有任何办法这样做.

:visible选择器在这种情况下不起作用,因为元素只对用户的眼睛隐藏但仍然可见.

有什么建议?

解决方法

这可能会奏效.我没有测试过.这是我发现 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
}

编辑:部分代码未更新.现在应该修好.

再次编辑:修复代码并测试它.有用!

大佬总结

以上是大佬教程为你收集整理的jquery – 确定html元素的可见性/实际z-index全部内容,希望文章能够帮你解决jquery – 确定html元素的可见性/实际z-index所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。