Finding the Dimensions of an Element - J Query

Problem
You want to determine the space occupied by an element.

Solution

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:

innerWidth
Returns the width excluding the border and including the padding

innerHeight
Returns the height excluding the border and including the padding

outerWidth
Returns the width including both the border and the padding

outerHeight
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).

Finding-the-Dimensions-of-an-Element

Given the following HTML:

Discussion
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 DMCA.com Protection Status

J Query Topics