如何使用 JavaScript 检查元素是否真的可见? [英] How do I check if an element is really visible with JavaScript?

问题描述

在 JavaScript 中，如何检查元素是否真的可见?

In JavaScript, how would you check if an element is actually visible?

我的意思不仅仅是检查 visibility 和 display 属性.我的意思是，检查元素不是

I don't just mean checking the visibility and display attributes. I mean, checking that the element is not

• visibility: hidden 或 display: none
• 在另一个元素下面
• 滚出屏幕边缘

由于技术原因，我不能包含任何脚本.但是，我可以使用 Prototype，因为它已经在页面上.

For technical reasons I can't include any scripts. I can however use Prototype as it is on the page already.

推荐答案

对于第 2 点.

我看到没有人建议使用 document.elementFromPoint(x,y)，对我来说，这是测试一个元素是否被另一个元素嵌套或隐藏的最快方法.您可以将目标元素的偏移量传递给函数.

I see that no one has suggested to use document.elementFromPoint(x,y), to me it is the fastest way to test if an element is nested or hidden by another. You can pass the offsets of the targetted element to the function.

这是 elementFromPoint 上的 PPK 测试页面.

Here's PPK test page on elementFromPoint.

来自 MDN 的文档:

elementFromPoint() 方法(可用于 Document 和 ShadowRoot 对象)返回指定坐标(相对于视口)的最顶部 Element.

The elementFromPoint() method—available on both the Document and ShadowRoot objects—returns the topmost Element at the specified coordinates (relative to the viewport).

这篇关于如何使用 JavaScript 检查元素是否真的可见?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！