Understanding the jQuery Dimensions:
jQuery provides different methods such as height(), innerHeight(), outerHeight(), width(), innerWidth() and outerWidth() to get and set the CSS dimensions for the elements. Following diagram describes these methods and will help you to calculate the dimensions of an element’s box using jQuery.
jQuery width() and height() Methods:
The jQuery width() and height() methods are used to get or set the width and the height of the element respectively. This width and height don’t include padding, border, and margin on the element. In the following example, the height and width of the <div> element will be returned.
You can also set the height and width of the element by including the values as a parameter within the height() and width() method. The following example will set the width of an <div> element to 350 pixels and height to 250 pixels respectively.
Note: You can use the jQuery width() or height() method if you want to use an element’s width or height in a mathematical calculation, as it returns the width and height property value as a unit-less pixel value (e.g. 350). Whereas, the css(“width”) or css(“height”) methods returns value with units (e.g. 350px).
jQuery innerWidth() and innerHeight() Methods:
The jQuery innerWidth() and innerHeight() methods are used to get or set the inner width and the inner height of the element respectively. This inner width and height includes the padding but excludes border and margin on the element.
In the following example, the width and height of the <div> element will be returned on the click if the button.
You can also set the element’s inner width and height by passing the value as a parameter to the innerWidth() and innerHeight() method.
For example, if the current width of the element is 350 pixels and the sum of the left and right padding is equal to 50 pixels than the new width of the element after setting the inner width to 400 pixels is 350 pixels i.e. New Width = Inner Width – Horizontal Padding.
jQuery outerWidth() and outerHeight() Methods:
The jQuery outerWidth() and outerHeight() methods are used to get or set the outer width and the outer height of the element. This outer width and height includes padding and border but excludes the margin on the element.
In the following example, the outer width and height of <div> element will be returned on the click of the button.
It is possible to get the outer width of an outer height that includes padding and border as well as the margin of the element, you just have to specify the true parameter for the outer width methods like outerWidth(true) and outerHeight(true).
You can also set the outer width and height of the element by passing the values as a parameter to the outerWidth() and outerHeight() methods. These methods will only alter the width and height of the elements content area to match the specified value, like the innerWidth() and innerHeight() methods.