如何判断 DOM 元素是否显示？答案

【问题标题】：How to tell if a DOM element is displayed?如何判断 DOM 元素是否显示？
【发布时间】：2010-09-25 01:13:48
【问题描述】：

不要与"How to tell if a DOM element is visible?"混淆

我想确定给定的 DOM 元素在页面上是否可见。例如。如果元素是设置了display:none; 的父元素的子元素，则它将不可见。

（这与元素是否在视口中无关）

我可以遍历元素的每个父元素，检查 display 样式，但我想知道是否有更直接的方法？

【问题讨论】：

标签： javascript html css dom

【解决方案1】：

从 Firefox 中的快速测试来看，当元素被 display:none 的父元素隐藏时，大小和位置属性（clientWidth、offsetTop 等）似乎都返回 0。

【讨论】：

好主意。甚至指定：w3.org/TR/cssom-view/#offset-attributes
在当前的 CSSOM 视图模块草案 (2013) 中，@Kornel 发布的链接不再指向正确的部分。查看w3.org/TR/cssom-view/#dom-htmlelement-offsettop。

【解决方案2】：

使用Prototype：

if($('someDiv').visible) {...}

【讨论】：

如果你能提供 Prototype 的这个功能的源代码来展示它是如何实现的，会更有帮助。
我只使用库。不是我写的。

【解决方案3】：

当我使用 MochiKit 时，我根据 Ant P 的回答得出的结论是：

getElementPosition('mydiv').y != 0

我还可以通过以下方式检查它是否在视口中（垂直）：

y = getElementPosition('mydiv').y
(y < getViewportPosition().y + getViewportDimensions().h &&
    getViewportPosition().y < y)

顺便说一句，这也适用于 IE6。

【讨论】：

【解决方案4】：

依靠位置为0是脆弱的。您最好编写一个辅助函数来遍历父母以直接检查他们的显示样式。

【讨论】：

想详细说明一下？如果它在标准中，得到符合标准的人群（FF、WebKit 等）的支持，并且得到不符合标准的大猩猩的支持，那么是什么让它变得脆弱？

【解决方案5】：

这是迭代解决方案 -

var elementShown = function(e){
    if (e == document) 
      return true;

    if ($(e).css('display') == 'none') //or whatever your css function is
      return false;

    return elementShown(e.parentNode);
}

【讨论】：

【解决方案6】：

如果元素不是通过继承显示的，.getClientRects() 将返回一个空数组（display="none" 来自父/祖先元素）

【讨论】：