outerWidth() method in jQuery

outerWidth() in jQuery

This method is used to get the current outer width of the first element in the set of matched elements.

outerWidth value includes padding and border and optionally margin.

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

Syntax 1

$(selector).outerWidth()

Syntax 2

$(selector).outerWidth(value)

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

$(selector).outerWidth(function(index,currentOuterWidth))

  • index - index position of the element in the set.
  • currentOuterWidth - old outer width of the element.

Example 1 - get

Try Yourself

Example 2 - set

Try Yourself

Example 3 - with function

Try Yourself

Example 4 - Difference between width() and outerWidth()

Try Yourself

Example 5 - Difference between innerWidth() and outerWidth()

Try Yourself