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

从Firefox中的一个快速测试来看,当一个元素被父元素隐藏时,大小和位置属性(clientWidth、offsetTop等)似乎都返回0 display:none .

使用 Prototype :

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

就像我用的 MochiKit ,根据Ant P的回答,我得出的结论是:

getElementPosition('mydiv').y != 0

我还可以通过以下方式检查它是否在视口中(垂直):

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

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

依赖于位置为0是脆弱的。最好编写一个helper函数来遍历父对象,直接检查它们的显示样式。

这是迭代解-

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

.getClientRects() display="none" 来自父/祖先元素)