outerHeight() method in jQuery

outerHeight() in jQuery

This method is used to get the current outer height (including padding, border) for the first element in the set of matched elements.

outerHeight value includes padding, border and optionally margin.

This method can be used on both visible and hidden contents.

Syntax 1

$(selector).outerHeight()

Syntax 2

$(selector).outerHeight(value)

  • value - An integer representing the number of pixels.
Syntax 3

$(selector).outerHeight(function(index,currentOuterHeight))

  • index - index position of the element in the set.
  • currentOuterHeight - old outer height of the element.

Example 1 - get

Try Yourself

Example 2 - set

Try Yourself

Example 3 - with function

Try Yourself

Example 4 - Difference between height() and outerHeight()

Try Yourself

Example 5 - Difference between innerHeight() and outerHeight()

Try Yourself