offset，client，scroll，style相关笔记

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></style>中写入无用，必须是行内！(操蛋！)

d.写:设置字符串,加上单位，可以是负值，style.top,style.left等均可设置，不管之前有没有写入，行内还是行外均可。

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 返回数字类型

什么是可视区域，实际区域?

比如a元素包含b元素，b内容超长，a元素的可视区域就是现在可见的b元素区域，实际区域就是b的全部区域，注意针对的是a元素而不是b元素！对于b元素，可视区域，实际区域是一样的！

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 返回数字类型

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

8.scrollWidth

功能:获取实际宽度(可超出可视区域！不会比clientWidth小)，不包括内滚动条

8.scrollHeight

功能:获取实际高度(可超出可视区域！不会比clientHeigtht小)，不包括内滚动条

注意事项：

由于个人习惯，使用时总是倾向于相对子元素而非包含它的父元素，实际上恰恰相反！

在横向出现滚动条的情况下(内部出现,这时不同浏览器对滚动条的处理不同数值会有差异，比如IE，clientWidth会减小，有些不变！width才是实际宽度)

所以大小关系为clientWidth<= width<=offsetWidth，scrollWidth有时最大

特别注意:

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

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