2012-02-02 23 views
11

Estaba tratando de obtener una lista del valor de altura del elemento pero estaba devolviendo 0.
He hecho algunas investigaciones y vi que para obtener la altura del elemento, ese elemento debe estar visible.
Pero quiero verificar su altura cuando está oculta. Si su altura es mayor que algún valor, utiliza algunas funciones y luego haz que sea visible. ¿Hay alguna manera de hacer esto?Jquery obteniendo la altura de un elemento oculto

quiero decir: altura

  1. de Check elemento oculto.
  2. Si tiene un valor correcto, hágalo visible.
  3. Si no tiene el valor requerido, realice algunas funciones.
  4. Hazlo visible.
+2

duplicado exacto de http://stackoverflow.com/questions/2345784/ jquery-get-height-of-hidden-element-in-jquery-1-4-2 – samccone

+2

funciona con elementos ocultos - http://jsfiddle.net/xgbEv/ –

+0

@ken redler: esa es la mejor solución que encontré sobre esto. Solo tuve que usar .appendTo ('body') porque no funcionaba con .show() – Guntram

Respuesta

17

Usted puede show el elemento de obtener la altura y luego ocultarlo, visualmente no verá ninguna diferencia.

var height = $('elementSelector').show().height(); 
$('elementSelector').hide(); 
if(height != <<HeightToCompare>>){ 
    //Code here 
} 
//Finally make it visible 
$('elementSelector').show(); 

Demo

+0

Es probable que parpadee. – AlienWebguy

+1

No, no parpadea. Eche un vistazo http://jsfiddle.net/PdEbM/ – ShankarSangoli

+0

Creo que mostrar un elemento y luego ocultarlo causará algún problema visual pero lo pruebo ahora. Sí, no crea ningún problema. Gracias por la ayuda. – Malixxl

6

Una forma es clonar el objeto, colocar el clon fuera de la ventana gráfica, hacerlo visible, medir el clon y luego destruirlo.

Así que tienes:

<div id="maybe" style="display: none;"> 
    Something 
</div> 

Dado que está utilizando jQuery, usted haría algo como esto:

$('#maybe') 
    .clone() 
    .attr('id','maybe_clone') // prevent id collision 
    .css({     // position far outside viewport 
    'position': 'absolute', 
    'left': '-1000px' 
    }); 

if($('#maybe_clone').show().height() > 200) { 
    $('#maybe').show(); 
} 

$('#maybe_clone').remove();  // housekeeping 
+0

+1, eso o temporalmente posicioné absolutamente y moví el elemento mismo. Como el elemento está oculto para comenzar, no molestará al marcado. –

+0

Si 'display: none' se aplica a un elemento primario, esto no funcionará. Una solución sería inyectar el clon fuera de su padre original: '.clone(). AppendTo ('body')'. –

+0

gracias por darme la pista para calcular la altura div oculta –

Cuestiones relacionadas