Getting the height of a hidden element using jQueryPosted on: April 08, 2011

If like me you've ever found yourself pulling your hair out because you just can't seem to figure out the height of a hidden element, then you're going to find this very useful...

See, in CSS there's a difference between display:none; and visibility:hidden; in that using the display property essentially removes the element from the document flow whereas the visibility property keeps the element in the document flow, but literally just makes it seem invisible.

Most javascript libraries (such as my favourite, jQuery) when hiding an element use the display property so when trying to get the height of said element, it returns as 0 because it's not considered to be in the document flow, therefore the browser isn't rendering it with a height.

The following bit of script will allow you to get the height of an element that's hidden using the display property by making use of the fact that the visibility property allows the browser to consider it rendered (but invisible), therefore it will have it's height.

function _invisibleDimensions(_el) {
  $(_el).css({
    display: "block",
    visibility: "hidden",
  });
  var _dim = {
    height: $(_el).outerHeight(),
    width: $(_el).outerWidth(),
  };
  $(_el).css({
    display: "none",
    visibility: "visible",
  });
  return _dim;
}