Qual è il modo migliore per testare un elemento nel DOM

Question

Ci sono un paio di modi in cui potrei fare questo (che io sappia).

test CSS display

if ($('#foo').css('display') == 'none') 

prova la visibilità

if ($('#foo').is(':visible')) 

Nel visibilità posso controllare se l'elemento è lì.

Gli elementi sono considerati visibili se occupano spazio nel documento. Gli elementi visibili hanno una larghezza o un'altezza maggiore di zero.

Elementi con visibilità: nascosti o opacità: 0 sono considerati visibili, poiché occupano ancora spazio nel layout.

Source

Ma, si noti che in entrambi non riesco a testare la visibilità (da parte dell'utente) perché:

Nascondere un elemento può essere fatto impostando la proprietà display per "none" o la proprietà visibility a "hidden". Tuttavia, si noti che questi due metodi producono risultati diversi:

visibilità: nascosto nasconde un elemento, ma ci vorrà ancora lo stesso spazio di prima. L'elemento sarà nascosto, ma continuerà a influire sul layout .

display: nessuno nasconde un elemento e non occupa spazio. L'elemento sarà nascosto, e verrà visualizzata la pagina come se l'elemento non c'è:

Source

Quindi, in nessuno degli esempi che testare se l'elemento è visibile in tutti i sensi per l'utente.

Quindi la mia domanda è:

• Che cosa le differenze tra i due, se di codici di cui sopra?
• Qual è il modo migliore per verificare se un elemento è visibile all'utente:

avrei dovuto usare qualcosa come:

if ($('#foo').is(':visible') && 
    $('#foo').css('opacity') > 0 && 
    $('#foo').css('visibility') != 'hidden') 

Answer 1

penso che la soluzione migliore è quella di implementare una funzione personalizzata come qui sotto e prova/migliorare le cose come nuovi venire,

$.fn.isReallyVisible = function() { //rename function name as you like.. 
    return (this.css('display') != 'none' && 
      this.css('visibility') != 'hidden' && 
      this.css('opacity') > 0); 
} 

è possibile che questo dovrebbe essere trasversale a prova di browser come abbiamo ar e usando la funzione jQuery .css (specificatamente per opacità).

DEMO

Answer 2

La differenza tra i due è che l'essere nascosto usando l'attributo "visibile" lascia l'elemento sulla pagina, ma non effettivamente visualizzato. Quindi, la spaziatura verrà presa in considerazione quando la pagina restituisce il resto del display.

Sembra che farlo in un altro modo in realtà impedisca l'inserimento dell'elemento nella pagina, che può modificare il modo in cui sono disposti gli altri elementi della pagina.

solito testare la parte visibile è abbastanza dalla mia esperienza, ma se si vuole essere più completo, allora sì si dovrebbe controllare l'utilizzo di "& &" condizioni su più attributi. Dipende tutto da quanto è pulito il codice che si sta utilizzando e quanto è stato testato il resto dell'interfaccia utente del sistema.

L'altra cosa da considerare è qual è lo scopo del test. Stai testando il codice che hai scritto, o in che modo il browser utilizza Javascript per il rendering della pagina? Vuoi testare il codice che stai creando e fare affidamento sul fatto che il browser funzioni (perché se il browser smette di funzionare, allora il tutto è inaffidabile). Quindi se il tuo codice dice all'elemento di impostare qualche attributo, allora il controllo per quell'attributo è tutto il test che devi fare. Tutto ciò può essere provato solo testando al di fuori del codice stesso (come in manuale guardando la pagina e altre cose del genere).

Answer 3

Se volete vedere se un elemento esiste nel DOM si può solo fare questo:

$.fn.exists = function() { 
    return this.length > 0; 
} 

Usage:

$('#myid').exists();