jQuery Web Page Design Tutorials

jQuery outerWidth Method Tutorial

When creating web pages effect with jQuery, we sometimes need to get the outer width dimension of selected element. This jQuery tutorial shows how to use the outerWidth() method to get the outer width dimension of selected element.

jQuery Demo

A demo of this jQuery tutorial is available. Click here to View Demo. (Pop up window)

Total Width of Selected Element

The totoal width of an HTML element is not just the width of the element. The total width of an element should includes:

  • width of element
  • total padding (left padding and right padding) of element
  • total border (left border and right border) of element
  • total margin (left margin and right margin) of element

This can be shown in the following diagram:

jQuery width of element

jQuery outerWidth Method

This is very easy to get the outer width of a selected element with jQuery code. jQuery outerWidth method allows to get:

  • outer width includes the width, padding and border only, or
  • outer width includes the width, padding, border and Margin

Get outer width includes the width, padding, border only

var widthShift = $("#innerFrame").outerWidth();

Get outer width includes the width, padding, border and Margin

var widthShift = $("#innerFrame").outerWidth(true);

This is the end of jQuery outerWidth MethodTutorial.