jQuery: height () / width () e “display: none”

Ho sempre pensato che gli elementi fossero display:none stile CSS restituiva 0 per height() e width() .

Ma in questo esempio:

HTML

 
a

CSS

 alert($("#target").height()); 

non lo fanno: http://jsfiddle.net/Gts6A/2/

Come mai? Ho visto 0 tornare molte volte in passato.

Se un elemento ha un offsetWidth di 0 (jQuery considera questo “nascosto”), controllato qui , quindi tenta di capire quale dovrebbe essere l’altezza. Imposta le seguenti proprietà sull’elemento tramite jQuery.swap() per la durata del controllo:

  • position: "absolute"
  • visibility: "hidden"
  • display: "block"

Quindi ottiene l’altezza, tramite getWidthOrHeight(...) che aggiunge il bordo / padding, se necessario, tramite augmentWidthOrHeight(...) seconda del modello box, e ripristina tutte le proprietà sopra ai valori precedenti.

Quindi, in pratica, sta prendendo l’elemento, mostrandolo fuori dal stream del documento, ottenendo l’altezza, quindi nascondendolo di nuovo, tutto prima che il thread dell’interfaccia utente aggiorni in modo da non vederlo mai accadere. Lo fa così .height() / .width() funziona, anche su elementi che sono attualmente nascosti, purché i loro genitori siano visibili … quindi puoi eseguire .height() / .width() , senza fare il mostra / nasconde il trucco che sta facendo nel tuo codice, è gestito all’interno di .height() e .width() .

MODIFICARE

Questo sembra essere stato corretto a partire da jQuery 1.4.4

Esempio: http://jsfiddle.net/GALc7/1/


Credo che questo sia vero solo per gli articoli il cui genitore è “display: none”

Vedi questo articolo sull’argomento http://dev.jquery.com/ticket/125

Inoltre, guarda questo esempio (salva come file .html) o vedi ( http://jsfiddle.net/GALc7/ )

    Example