All the HTML elements have properties that are used in Document Object Model programming to determine their dimensions. They are not part of original DOM specifications, but rather added later to define the dimensions of HTML elements on a web-page.
These dimensions include height, width, padding, scrollbars and borders of an element in the web-page. However offset properties do not include element's margins. The below mentioned properties get or set the offset dimensions:
The offsetHeight property returns the element's layout height, which includes vertical space including element’s height, horizontal bar, top and bottom border height.
Syntax for offsetHeight
var oHeight = element.offsetHeight;
The offsetLeft property returns the number of pixels between the outside to inside left border of the element.
Syntax for offsetLeft
var oLeft = element.offsetLeft;
The offsetTop property returns the number of pixels between the outside to inside top border of the element.
Syntax for offsetTop
var oTop = element.offsetTop;
The offsetWidth property returns the elements layout width which includes horizontal space taken by element including it’s width, width of vertical scrollbar, left and right border width.
Syntax for offsetWidth
var oWidth = element.offsetWidth;
Example of offsetHeight, offsetLeft, offsetTop, and offsetWidth properties
These dimensions are used to calculate (or set) the space between element’s content and it’s padding. The properties determining client dimensions are:
The clientWidth property returns the width of the content area along with it's left and right padding.
Syntax for clientWidth
var cWidth = element.clientWidth;
The clientHeight property returns the height of the content area along with it's top and bottom padding.
Syntax for clientHeight
var cHeight = element.clientHeight;
In the example below the offsetHeight and offsetWidth include the margin size, whereas clientHeight and clientWidth property do not.
Example of offsetHeight, offsetWidth, clientHeight, and clientWidth properties
These properties are used to provide information on element's scrolling bars settings. Elements can be made to scroll using overflow property of CSS.
The scrollHeight property determines total height of the content without scrollbars.
Syntax for scrollHeight
var sHeight = element.scrollHeight;
The scrollLeft property returns the number of pixels hidden in the left of the content area.
Syntax for scrollLeft
var sLeft = element.scrollLeft;
The scrollTop property returns the number of pixels hidden in the top of the content area.
Syntax for scrollTop
var sTop = element.scrollTop;
The scrollWidth property determines total width of the content without scrollbars.
Syntax for scrollWidth
var sWidth = element.scrollWidth;
Example of scrollHeight, scrollWidth, scrollHeight, and scrollWidth properties