¿Cómo determinar si un elemento DOM específico es visible o no?

Question

Usando jQuery, ¿cuál es la forma más fácil de determinar si un elemento en particular es visible? No me refiero a visible dentro de la ventana gráfica actual, sino en la página.

Lo ideal es que la función devuelva false si el elemento o cualquiera de sus antepasados ​​tiene una regla CSS como display: none o visibility: hidden. No necesita preocuparse por overflow: hidden.

Answer 1

Utilice :visible selector con el método is.

if($('elementSelector').is(':visible')){ 
    //Element is visible 
} 

Answer 2

Puede usar el método is().

$('#element').is(':visible'); 

Answer 3

http://api.jquery.com/visible-selector/

$('#mydiv').is(":visible"); 

Answer 4

$('div:visible'); volverán todos visibles divs.

Además, vale la pena señalar esta sección de la jQuery 1.3.2 changelog:

En jQuery 1.3.2 Un elemento es visible si su navegador informado offsetWidth o offsetHeight es mayor que 0. Esto significa que si el CSS de su elemento display es "none", o cualquiera de sus elementos padre/ancestro es "none", o si el ancho del elemento es 0 y la altura del elemento es 0, entonces un elemento será reportado como oculto.