js获取元素自身有关的位置和大小的属性

一、DOM提供的

偏移量属性

offsetParent 偏移参考父级，距离自己最近的有定位的父级，如果都没有定位参考body（html）。
offsetLeft/offsetTop 偏移位置
offsetWidth/offsetHeight 偏移大小

客户端大小

client 系列没有参考父级元素。
clientLeft/clientTop 边框区域尺寸，不常用
clientWidth/clientHeight 边框内部大小

滚动偏移属性

scrollLeft/scrollTop 盒子内部滚动出去的尺寸
scrollWidth/scrollHeight 盒子内容的宽度和高度

二、 jQuery 操作元素的尺寸和位置

在CSS中，宽高有三种表示，分别是content-box、padding-box和border-box里的三种宽高。因此下面分别有获取方法。

1、width() 和 height()

操作的大小仅仅是内容部分

2、innerWidth() 和 innerHeight()

操作的大小是内容部分 + padding

3、outerWidth() 和 outerHeight()

操作的大小是内容部分 + padding + border

4、offset()

获取元素距离文档的位置。返回一个对象，包含了元素的位置。该方法获取的元素的位置，永远参照文档，和定位没有关系。

5、position()

距离上级定位参考元素的位置。返回一个对象，包含了元素的位置。该方法获取的元素的位置，参照最近的定位元素（和定位有关系）

6、scrollTop()

操作卷去的页面间距。