Home/Jquery/.outerWidth() method in Jquery

.outerWidth() method in Jquery


The jQuery outerWidth () method is used to GET/SET the outer width for the matched element. This will includes left and right padding but not border/margin.

  • GET outer Width: It will return the outerWidth  for the selected/matched element
  • SET outer Width: It will set the outerWidth  for the selected/matched element


  • $(selector).outerWidth()
  • $(selector).outerWidth(value,function(Integer index, Number Width))
MarginIt specify the Boolean value to include the element’s margin in the calculation.

  • False:It specifies noot to include the margin. It is a default value.
  • True:It specifies to Include the margin.
Value It specify the number of pixels or a number along with an optional unit.
function(Integer index,widthA function returning the outer width to set. Get the index position of the element in the set and the old outer width as parameter

If includeMargin set to false then the padding and border are included in the calculation; if true then the margin is also included.



Here, width of the box is 90. So width() method will return the same width mentioned the property but innerWidth() method will add the left(10px) , right(10px) padding  and include border as well ( 5+5 = 10). S0 it return 120 as its outerWidth.


Leave a Reply