Latest web development tutorials

jQuery outerWidth () method

jQuery HTML / CSS Methods jQuery HTML / CSS Methods

Examples

Back <div> element external width:

$("button").click(function(){
alert($("div").outerWidth());
});

try it"

Definition and Usage

outerWidth () method returns the first matching element of the external width.

As shown in the following image, the method comprising the padding and border.

Tip: To include margin, please use outerHeight (true).

jQuery Dimensions


Related methods:

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

grammar

$(selector).outerWidth( includeMargin )

参数 描述
includeMargin 可选。布尔值,规定是否包含 margin。
  • false- 默认。不包含 margin。
  • true- 包含 margin。


Examples

More examples

It contains margin
Whether to include provisions margin.

Display size by related methods
How to use the width (), height (), innerHeight (), innerWidth (), outerWidth () and outerHeight ().


jQuery HTML / CSS Methods jQuery HTML / CSS Methods