¿Cómo saber si se muestra un elemento DOM?

Question

Esto no debe confundirse con "How to tell if a DOM element is visible?"

Quiero determinar si un elemento DOM dado es visible en la página. P. ej. si el elemento es hijo de un padre que tiene display:none; establecido, entonces no será visible.

(Esto no tiene nada que ver con si el elemento está en la ventana gráfica o no)

pude recorrer cada padre del elemento, comprobando el estilo display, pero me gustaría saber si hay una forma más directa?

Answer 1

A partir de una prueba rápida en Firefox, parece que las propiedades de tamaño y posición (clientWidth, offsetTop, etc.) devuelven 0 cuando un elemento está oculto por un elemento primario que es display:none.

Answer 2

Usando Prototype:

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

Answer 3

Como estoy usando MochiKit, lo que me ocurrió con base en la respuesta de Ant P fue:

getElementPosition('mydiv').y != 0 

también puedo comprobar si está en el área de visualización (verticalmente) por:

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

Por cierto, esto también funciona en IE6.

Answer 4

Depender de la posición 0 es frágil. Es mejor que escribas una función de ayudante para repetir a través de los padres y verificar su estilo de visualización directamente.

Answer 5

Aquí está la solución iterativa -

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