Net-informations.com
SiteMap  | About    

jQuery Dimensions



The jQuery library includes various methods to manipulate DOM element's dimensions like height, width etc. When writing reusable plugins , you often want to set or animate an element's width and height that include its padding, border, or margin. This is especially important in plugins that allow custom styling.

jQuery DOM Element's Dimensions Manipulation

jQuery provides six functions that we can use to get the height and width of an element.

  1. width()
  2. height()
  3. innerWidth()
  4. innerHeight()
  5. outerWidth()
  6. outerHeight()

jQuery width() and height() Methods

The jQuery width() and height() methods get or set the width and the height of the element respectively. This width and height doesn't include padding, border and margin on the element.

The above code will return the width and height of the boxDiv element.

innerWidth() and innerHeight() Methods

The jQuery innerWidth() and innerHeight() methods returns the inner width and the inner height of the element, includes padding, respectively.

The above code will return the Inner width and Inner height of the boxDiv element.

  1. InnerHeight = height + padding on both side = 100 + 20 + 20 = 140

  2. InnerWidth = width + padding on both side = 200 + 20 + 20 = 240

outerWidth() and outerHeight() Methods

The jQuery outerWidth() and outerHeight() methods returns the outer width and the outer height of the element respectively. This outer width and height includes padding and border but excludes the margin on the element.

The above code will return the Outer width and Outer height of the boxDiv element.

  1. OuterHeight = height + padding + border = 100 + 20 + 20 + 2 + 2= 144

  2. InnerWidth = width + padding + border = 200 + 20 + 20 +2 +2 = 244

outerWidth(true) and outerHeight(true)

The jQuery outerWidth(true) and outerHeight(true) methods returns the outer width and the outer height of the element respectively includes padding, border, and margin.

  1. OuterHeight(true) = height + padding + border + margin = 100 + 20 + 20 + 2 + 2 + 5 + 5= 154

  2. InnerWidth(true) = width + padding + border + margin = 200 + 20 + 20 +2 +2 +5 +5 = 254


run this source code Try it Yourself
#boxDiv { height: 100px; width: 200px; padding: 20px; margin: 5px; border: 2px solid black; background-color: yellow; }

Width:

Inner Height:

Outer Width:

Outer Width(true)

Full Source









net-informations.com (C) 2018    Founded by raps mk
All Rights Reserved. All other trademarks are property of their respective owners.