jQuery Tutorial
jQuery Introduction jQuery Getting Started jQuery Syntax jQuery Selectors jQuery Events
jQuery Effects
jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animation jQuery stop() jQuery Callback jQuery Chaining
jQuery Manipulation
jQuery Get/Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions
jQuery Traversing
jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering
jQuery AJAX
jQuery AJAX Intro jQuery Load jQuery Get/Post jQuery AJAX Events
jQuery Misc
jQuery noConflict() jQuery Filters
jQuery References
jQuery Reference jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Miscellaneous jQuery Properties

jQuery Dimensions

With jQuery, it is easy to work with the dimensions of elements and browser window.

jQuery provides methods to manipulate dimensions of elements in efficient way.

In this chapter we will explain how to get or set dimensions of HTML elements.


jQuery Dimension Methods

We have the following jQuery methods that are used for working with dimensions:

The following section will show you how to use each method.


Understanding jQuery Dimensions

Check out the following illustration to understand how these methods are calculating the dimensions of an element's box.

jQuery Dimensions

jQuery width() and height() Methods

The jQuery width() method gets or sets the width of the selected elements (excludes padding, border and margin).

The jQuery height() method gets or sets the height of the selected elements (excludes padding, border and margin).

The following example gets the width and height of a DIV element:

Run code

The following example sets the width and height of all paragraphs:

Run code

jQuery innerWidth() and innerHeight() Methods

The jQuery innerWidth() method gets or sets the width of the selected elements (includes padding).

The jQuery innerHeight() method gets or sets the height of the selected elements (includes padding).

The following example gets the inner width and inner height of a DIV element:

Run code

jQuery outerWidth() and outerHeight() Methods

The jQuery outerWidth() method gets or sets the width of the selected elements (includes padding and border).

The jQuery outerHeight() method gets or sets the height of the selected elements (includes padding and border).

The following example gets the outer width and outer height of a DIV element:

Run code

The outerWidth(true) method gets or sets the width of the selected elements (includes padding, border and margin).

The outerHeight(true) method gets or sets the height of the selected elements (includes padding, border and margin).

The following example gets the outer width and outer height of a DIV element (including margin):

Run code

More Examples

Show the difference between width(), height(), innerWidth(), innerHeight(), outerWidth() and outerHeight():

Run code

It is also possible to find the width and height of the window and document:

Run code

jQuery CSS Reference

For a complete CSS methods reference, visit our jQuery HTML/CSS Reference.