Retrieving Height of Concealed Elements with jQuery

When working with hidden elements, it may be necessary to retrieve their dimensions for various purposes. However, conventional methods of obtaining the height of an element can fail if the element is not visible.

Inefficient Approach

The described approach of temporarily unhiding the element, measuring its height, and then re-hiding it is cumbersome and inefficient.

Alternative Solution

jQuery provides a more efficient solution:

1. Modify Element Attributes: Temporarily manipulate the element's style attributes:

   • Set position to absolute (optional if the element is already absolute-positioned)
   • Set visibility to hidden (make the element invisible)
   • Set display to block (make the element visible, but not in the main document flow)
2. Measure Height: Retrieve the height of the element using jQuery's .height() method.
3. Restore Attributes: Reset the element's style attributes to their original values using the attr() method or by setting the style property directly.

Code Example

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

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

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

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

This method allows you to discreetly measure the height of a hidden element without affecting the layout or visibility of the page.