Please note, this is a STATIC archive of website www.w3schools.com from 05 May 2020, cach3.com does not collect or store any user information, there is no "phishing" involved.
THE WORLD'S LARGEST WEB DEVELOPER SITE

jQuery outerWidth() Method

❮ jQuery HTML/CSS Methods

Example

Return the outer width of a <div> element:

$("button").click(function(){
  alert($("div").outerWidth());
});
Try it Yourself »

Definition and Usage

The outerWidth() method returns the outer width of the FIRST matched element.

As the image below illustrates, this method includes padding and border.

Tip: To include the margin, use outerWidth(true).

jQuery Dimensions


Related methods:

  • width() - Sets or returns the width of an element
  • height() - Sets or returns the height of an element
  • innerWidth() - Returns the width of an element (includes padding)
  • innerHeight() - Returns the height of an element (includes padding)
  • outerHeight() - Returns the height of an element (includes padding and border).

Syntax

$(selector).outerWidth(includeMargin)

Parameter Description
includeMargin Optional. A Boolean value specifying whether or not to include the margin
  • false - Default. Does not include the margin
  • true - Includes the margin

Try it Yourself - Examples

Include the margin
Specifiy whether or not to include the margin.

Display dimensions with related methods
How to use width(), height(), innerHeight(), innerWidth(), outerWidth() and outerHeight().


❮ jQuery HTML/CSS Methods