jQuery Dimensions


To retrieve and set the CSS dimensions for items, jQuery provides numerous methods such as height(), innerHeight(), outerHeight(), width(), innerWidth(), and outerWidth(). See the figure below to see how various approaches calculate the size of an element's box.

jQuery width() and height() Methods

The jQuery width() and height() functions return or set the element's width and height, respectively. This width and height do not include the element's padding, border, or margin. The width and height of a <div> element are returned in the following example.

Example

Preview

Similarly, you may set the element's width and height by passing the value as an argument to the width() and height() methods. The value can be a string (number and unit, for example, 100px, 20em, etc.) or a number. The following example will set the width and height of a <div> element to 300 and 300 pixels, respectively.

Example

Preview

jQuery innerWidth() and innerHeight() Methods

The innerWidth() and innerHeight() functions of jQuery fetch or set the element's inner width and inner height. This inner width and height include padding but omit the element's border and margin. On the click of a button, the following example will return the inner width and height of a <div> element.

Example

Preview

Similarly, you may modify the inner width and height of the element by supplying the value as an argument to the innerWidth() and innerHeight() methods. These methods simply change the width or height of the content area of the element to match the supplied value.

Example

Preview

jQuery outerWidth() and outerHeight() Methods

The jQuery outerWidth() and outerHeight() functions return or set the element's outer width and outer height, respectively. This outer width and height include padding and border but do not include the element's margin. On the press of a button, the following example will return the outside width and height of a <div> element.

Example

Preview

You may also extract the element's outside width and height, including padding and border, as well as the margin. Simply supply the true option for outer width techniques such as outerWidth(true) and outerHeight(true).

Example

Preview