Come determinare se uno specifico elemento DOM è visibile o no?

Question

Utilizzando jQuery, qual è il modo più semplice per determinare se un particolare elemento è visibile? Non intendo visibile all'interno della finestra corrente, ma sulla pagina.

Idealmente, la funzione deve restituire false se l'elemento o uno dei suoi antenati ha una regola CSS come display: none o visibility: hidden. Non è necessario preoccuparsi di overflow: hidden.

Answer 1

Utilizzare il selettore :visible con il metodo is.

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

Answer 2

È possibile utilizzare il metodo is().

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

Answer 3

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

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

Answer 4

$('div:visible'); torneranno tutte visibili divs.

Inoltre, vale la pena notare questa sezione del jQuery 1.3.2 changelog:

In jQuery 1.3.2 un elemento è visibile se il suo browser-riferito offsetWidth o offsetHeight è maggiore di 0. Ciò significa che se CSS del vostro elemento display è "none", o uno qualsiasi dei suoi elementi genitore/antenato mostra "none", oppure se la larghezza dell'elemento è 0 e l'altezza dell'elemento è 0, allora un elemento verrà segnalato come nascosto.