Question

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

混淆

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

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

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

Answer 1

在Firefox中的快速测试中，当父元素display:none隐藏元素时，大小和位置属性（clientWidth，offsetTop等）都会返回0。

Answer 2

使用Prototype：

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

Answer 3

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

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

Answer 6

如果继承不显示元素，则

.getClientRects()将返回一个空数组（来自parent / ancestor元素的display="none"）

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

6 个答案: