1. <Professional JavaScript for web developer>
Offset dimensions incorporate all of the visual space that an element takes up on the screen. An element‘s visual space on the page is made up of its height and width, including all padding, scrollbars, and borders (but not including margin). The following four properties are used to retrieve offset dimensions:
- offsetHeight : The amount of vertical space, in pixels, taken up by the elements, including its height, the height of a horizontal scrollbr (if visible), the top border height, and the bottom border height.
- offsetWidth : The amount of horizontal space taken up by the element, including its width, the width of a vertical scrollbar (if visible), the left border width, and the right border width.
- offsetLeft : The number of pixels between the element‘s outside left border and the containing element‘s inside left border.
- offsetTop : The number of pixels between the element‘s outside top border and the containing element‘s inside top border.
Figure 12-1 illustrates the various dimensions these properties represent.
2. MDN
The HTMLElement.offsetLeft read-only method returns the number of pixels that the upper left corner of the current element is offset to the left within the HTMLElement.offsetParent node.
The HTMLElement.offsetParent read-only property returns a reference to the object which is the closest positioned containing element. If the element is non-positioned, the nearest table cell or root element is the offsetParent. offsetParent returns null when the element has style.display set to "null";
3. Test
Test code is in here [http://runjs.cn/code/fcotalf7]