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

Question

这不会与"How to tell if a DOM element is visible?"

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

（这有什么好做的元素是否是在视口中与否）

我可以通过元素的每个父迭代，检查display的风格，但我想知道是否有更直接的方式？

Answer 1

从Firefox的快速测试中，它看起来像大小和位置属性（clientWidth，offsetTop等）全部返回0时，父元素被隐藏display:none。

Answer 2

使用Prototype：

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

Answer 3

由于我使用的是MochiKit，我想出了基于蚂蚁普的回答是：

getElementPosition('mydiv').y != 0 

我也可以检查它是否在视（垂直）通过：

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

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

Answer 4

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

Answer 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); 
}