jQuery Width and Height of HTML Element
jQuery provides many functions to extract the dimensions (width and height) of HTML Element. They are
Consider a HTML Element with width and height, padding, border and margin set. Following picture demonstrate the results of different methods :
The following table provides the relation between output of different width, height methods and properties like padding, border and margin.
|width()||Width of HTML Element|
|height()||Height of HTML Element|
|innerWidth()||width() + Left Padding + Right Padding|
|innerHeight()||height() + Top Padding + Bottom Padding|
|outerWidth()||innerWidth() + Left Border Width + Right Border Width|
|outerHeight()||innerHeight() + Top Border Width + Bottom Border Width|
|outerWidth(true)||outerWidth() + Left Margin + Right Margin|
|outerHeight(true)||outerHeight() + Top Margin + Bottom Margin|
Example – Programmatically get Width and Height of a paragraph
To programmatically get width and height of HTML element, we use jQuery width and height methods. Following example demonstrates different width and height functions that consider padding, border and/or margin.
In this jQuery Tutorial, we have learnt jQuery Width and Height of HTML Element() with the help of examples.