Finding the Dimensions of an Element - J Query

You want to determine the space occupied by an element.


The width and height methods can be applied to any element, and they are useful for determining the computed width or height of an element. However, they fall short if you need to determine the actual real estate that an element is occupying on the screen.In addition to width and height, jQuery provides the following methods for determining more specific dimensions of an element:

Returns the width excluding the border and including the padding

Returns the height excluding the border and including the padding

Returns the width including both the border and the padding

Returns the height including the border and including the padding

For a visual reference, see Figure(Illustration of an element’s height, innerHeight, and outerHeight).


Given the following HTML:

The innerWidth/innerHeight and outerWidth/outerHeight methods are useful tools for determining the actual dimension that you’re after—the basic width and height methods are of limited use when you are trying to measure the actual real estate that an element with border and padding occupies on the screen. Note that using innerWidth, innerHeight, outerWidth, or outerHeight methods on

jQuery(document) or jQuery(window) objects will return NaN.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

J Query Topics