How to Get the Height of a Hidden Element in jQuery?

Getting the Height of Hidden Elements in jQuery

When working with hidden elements, it can be challenging to obtain their dimensions. Many developers resort to revealing the element temporarily, measuring its height, and then concealing it again. However, there is a more effective approach.

jQuery provides a convenient solution for this task. Here's how you can get the height of a hidden element within a concealed parent div:

<code class="javascript">var previousCss = $("#myDiv").attr("style");

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

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

$("#myDiv").attr("style", previousCss ? previousCss : "");</code>

This approach involves setting the element's position to "absolute" (optional if it's already absolute), making it invisible, and temporarily unhiding it. You can then measure its height and restore its previous style attributes. This method allows you to work with hidden elements without disrupting the page's layout or causing unnecessary flickering.

The above is the detailed content of How to Get the Height of a Hidden Element in jQuery?. For more information, please follow other related articles on the PHP Chinese website!