Jquery obtener la altura del elemento de altura automática

Question

¿Hay alguna manera de devolver la altura de un elemento que ya está configurado en automático? Acabo de obtener 0 cuando llamo $ ("# element"). Height();

Aquí está el código jquery. El img.height() devuelve 0, por lo tanto, el resultado final está desactivado.

img.css({top: (img.parent().height() - img.height()) /2, left: (img.parent().outerWidth() - img.outerWidth())/2}); 

El HTML se parece a esto:

<div id="exploreImage" class="virtual-room-large" style="width: 288px; height: auto; top: 185px; left: 89px; "> 

Answer 1

¿Usted intentó $("#element").outerHeight()? Obtiene la altura calculada en lugar de la altura establecida explícitamente.

Answer 2

compruebe que intenta obtener la altura cuando DOM está listo, es decir en la función window.onload.

En caso de que su elemento div esté vacío y la altura sea automática, devolverá 0. Por lo tanto, es probable que su div esté vacío antes de que se cargue la página completa.

Por ejemplo: Quiero recordar alturas iniciales para mis divs .elementDiv:

var initialHeight = []; 
window.onload = function() { 
$('.elementDiv').each(function(i) { 
    initialHeight[i]=$(this).height(); 
    }); 
    // then use it 
    } 

Cuando no está en la función onload, las alturas que recibo son todos 0.

espero que este fue el razón, porque no veo otra cosa ..

Answer 3

tenía este mismo problema y encontrar la solución aquí: http://www.fortwaynewebdevelopment.com/jquery-width-or-height-always-returns-0-fix/

Cuando uso jQuery, me gusta mantenerlo tanto como pueda por la constancia.

En realidad ambas soluciones - usando window.load() {} $ o (" mi elemento") .load() {} funcionaba muy bien para mí, así que espero que esto puede ayudar a salir tan bien o cualquier otra persona encontrar este problema.

Answer 4

He encontrado una solución para hacer una transición con facilidad y facilidad. Esta solución necesita el "salto" del elemento:

var elementselector = "#elementtoscroll"; 
$(elementselector).css("height", "auto"); 
var elemheight = $(elementselector).css("height"); 
$(elementselector).css("height", "0"); 
$(elementselector).css("height", elemheight); 

De esta manera, obtiene la altura Javascript - Yo sé que no es una forma beuatiful, pero funciona. Esto es importante, por ejemplo, para el efecto de relajación.

EDIT: Hay que decir, que esto es sólo posible con CSS3 y un estilo CSS-como esto:

#panel{ 
    background-color: #FF00FF; 
    display: block; 
    height: 0px; 
    transition: all 300ms ease-in-out; 
    overflow: hidden; 
} 

Answer 5

creo offsetHeight o clientHeight o scrollHeight pueden resolverlo.por ejemplo:

img.parent()[0].offsetHeight 

o

img.parent()[0].scrollHeight 

diferente entre estos 3 métodos puede ver aquí:

• http://jsfiddle.net/shibualexis/yVhgM/3/
• What is offsetHeight, clientHeight, scrollHeight?

Answer 6

Yo Puedes probar Window.getComputedStyle();

Se devolverá el conjunto de estilo computarizada, (si es que la propiedad de estilo no está definido, por ejemplo automóviles)

var elem1 = document.getElementById("elemId"); 
var style = window.getComputedStyle(elem1); 

entonces se puede decir

var computedHeight = style.height; 

para más información: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle