JavaScript DOM 9 - 元素的尺寸与位置

1: 获得页面上某个元素在视口坐标系的位置和元素的尺寸：

element.getBoundingClientRect():

{    
    left:8
    top:104
    right:1432
    bottom: 158
    width:1424
    height:54   
}

以上方法返回一个对象，包含六个元素，分别是此元素左上角和右下角的坐标，以及元素的宽和高。但是在原始的IE中并不返回width和height, 不过可以自己通过坐标计算出来。
值得注意的是getBoundingClientRect()不是实时的，在调用此函数后，用户再滚动或者改变浏览器窗口大小，它返回的值并不会更新。

针对所有的文档元素，它们都定义了三组变量跟尺寸和位置有关：

1: 包含border的尺寸

offsetWidth//返回包含border在内的宽度
offsetHeight//返回包含border在内的高度
offsetTop//元素与其offsetParent之间的垂直距离
offsetLeft//元素与其offsetParent之间的水平距离
offsetParent//

2: 不包含border的尺寸

clientWidth//返回不包含border在内的宽度
clientHeight//返回不包含border在内的高度
clientLeft//
clientTop//

3: 元素的滚动条

scrollWidth//对于可滚动的元素（overflow:scroll）的元素，返回元素内容的宽度
scrollHeight//对于可滚动的元素（overflow:scroll）的元素，返回元素内容的高度
scrollLeft//对于可滚动的元素（overflow:scroll）的元素，返回/设置元素的滚动条向右边滚动的px
scrollTop//overflow:scroll）的元素，返回/设置元素的滚动条向下边滚动的px