1.offsetTop

功能:获取元素上外缘与最近的定位父元素内壁的距离，如果没有定位父元素，则是与文档上内壁的距离

使用方法:js document.querySelector(...).offsetTop 返回数字类型 只读

注解:边缘：border以外

定位父元素:position为relative，absolute或fixed

内壁：border以内

1.1 style.top

功能：与offsetTop相同

使用方法:js document.querySelector(...).style.top

区别:

a.本身得是定位元素，否则设置了也没有意义；

b.可读写；

c.读:返回字符串，如果没有给它在行内设置top属性，一律返回空字符串,经测试，在<style></stype>中写入无用，必须是行内！(操蛋！)

d.写:设置字符串,加上单位，可以是负值

2.offsetLeft

功能:获取元素左外缘与最近的定位父元素内壁的距离，如果没有定位父元素，则是与文档左内壁的距离

使用方法:js document.querySelector(...).offsetLeft 返回数字类型 只读

注解: 不存在offsetBottom或者offsetRight

2.2 style.left(类style.top)

还有style.width,style.height...特性都和style.top一样，一样操蛋。。

3.offsetWidth

功能:获取width+padding+border 不包括margin和外滚动条

使用方法: js document.querySelector(...).offsetWidth 返回数字类型

4.offsetHeight

功能:获取height+padding+border 不包括margin和外滚动条

使用方法: js document.querySelector(...).offsetHeight 返回数字类型

备注：JQuery有offset方法，返回的是相当于文档的距离，返回数据为对象{left: 左偏移，top: 上偏移} 偏移值为数字类型

5.clientWidth

功能:获取width+ padding

使用方法:js document.querySelector(...).clientWidth 返回数字类型

5.clientHeight

功能:获取width+ padding

使用方法:js document.querySelector(...).clientHeight 返回数字类型

6.scrollLeft

功能:获取左移的距离，只能为>=0的数值，越往左越大

使用方法:js document.querySelector(...).scrollLeft 返回数字类型

注意事项:使用时相对父元素！

7.scrollTop

功能:获取上移的距离，只能为>=0的数值，越往上越大

使用方法:js document.querySelector(...).scrollTop 返回数字类型

注意事项:使用时相对父元素！

特别注意:

出于jquery的习惯，很多人习惯于写document.querySelector(...).width和document.querySelector(...).height

写法是大错特错的，在chrome，IE，firefox上将返回0，safari上返回undefined。

offset，client，style相关笔记