是否有统一的方法来知道节点是否可见？

Question

我希望能够知道某个节点是否可见并在屏幕上呈现。据我所知，至少有 3 种标准且简单的方法可以使 HTML 节点不可见：

• 设置opacity: 0;
• 设置display: none;
• 设置visibility: hidden。

我可以只检查这三个，但我担心人们在隐藏内容的方式方面会变得有创意：

• 使用负边距将元素发送到屏幕外；
• 使用宽度或高度为0并隐藏溢出；
• 我相信人们已经开发了更多。

所以我想知道是否有确定节点是否呈现到屏幕的标准方法。我很确定所有主要浏览器都为自己确定加速绘图，所以它可能以某种方式暴露。

Answer 1

您可以尝试使用 jQuery 的 :visible 修饰符。

http://api.jquery.com/visible-selector/

不幸的是，我很确定这没有考虑到您所说的任何“棘手”案例。

Answer 2

如果这是您的页面，那么您可以拥有大部分的控制权，这成为应用您实施的标准的问题。如果这是一个 forign 页面（例如，如果您正在编写书签），那么变量的数量非常大。

可见性对人和浏览器来说意味着不同的东西。浏览器需要知道页面的上下文和布局，以及对象是否占用空间，即使在opacity:0 和visibility:hidden 的情况下也是如此，这就是jQuery 以这种方式工作的原因。

所以你需要查看特定元素，包括它的边距、填充、溢出属性、可见性、显示、所有不透明度设置，我猜也要检查color:rgba(*,*,*,0)。然后你需要一直查看每个父对象回到文档。