Recuperar la altura de elementos ocultos con jQuery

Al trabajar con elementos ocultos, puede ser necesario recuperar sus dimensiones para diversos fines. Sin embargo, los métodos convencionales para obtener la altura de un elemento pueden fallar si el elemento no es visible.

Enfoque ineficiente

El enfoque descrito de mostrar temporalmente el elemento, midiendo su altura y luego volver a ocultarlo es engorroso e ineficiente.

Solución alternativa

jQuery proporciona una solución más eficiente:

1. Modificar atributos del elemento: Manipular temporalmente los atributos de estilo del elemento:

   • Establecer la posición en absoluta (opcional si el elemento ya está en posición absoluta)
   • Establecer visibilidad en oculto (hacer que el elemento sea invisible)
   • Establecer visualización en bloque (hacer que el elemento sea visible, pero no en el flujo de documentos principal)
2. Medir Altura: Recupera la altura del elemento usando el método .height() de jQuery.
3. Restaurar atributos: Restablece los atributos de estilo del elemento a sus valores originales usando el método attr() o estableciendo la propiedad de estilo directamente.

Ejemplo de código

var previousCss = $("#myDiv").attr("style");

$("#myDiv").css({
    position: 'absolute',
    visibility: 'hidden',
    display: 'block'
});

var optionHeight = $("#myDiv").height();

$("#myDiv").attr("style", previousCss ? previousCss : "");

Este método le permite medir discretamente la altura de un elemento oculto sin afectar el diseño o la visibilidad de la página .