offset Dimensions 详解

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]

1. Note that offsetLeft is read-only , therefore it can't be set like left;

2. JavaScript通过element.style.left访问left属性，style属性的一点注意问题参见 [这里] 。如果left写在<style>或外部样式表中，JavaScript将无法访问到left的值（undefined）。所以element.style.left = parseInt(element.style.left) + 10 + "px"; 代码是无法修改left的值。 正确的代码是element.style.left = element.offsetLeft + "10" + "px";  element.offsetLeft是可以通过JavaScript获取到其值的，并且代码最后是作用在行内元素上 ！