js的三大系列
一、offset系列
offset系列是获取元素的宽、高、距离左边和距离顶部的距离及最近定位的父级元素，对应的五个属性如下：
1、offsetWidth
获取元素的宽，包括元素的边框
2、offsetHeight
获取元素的高，包括元素的边框
3、offsetLeft
这个属性需要分两种情况讨论
- 当元素没有脱离文档流时，offsetLeft获取到的值就是元素到左边的距离： offsetLeft = 父级的margin-lefe+父级的padding-left+父级的border+自己的margin-left (多层嵌套就会有多个父级，累加计算)
- 当元素脱离文档流时，offsetLeft获取到的值和父级元素没有关系：offsetLeft的值只和自己的left值和maigin-left值有关
4、offsetTop
此属性和offsetLeft一样，在此就不赘述了。
5、offsetParent
offsetParent属性获取的是该元素中有定位的最近父级元素
简述offset系列和style.left style.top style.width style.height 的区别
- 当元素的样式是在html页面标签中，用style属性定义的话，可以通过元素（e）e.style.left ；e.style.top； e.style.width； e.style.height来获取，但是除此之外的样式定义，通过元素.的方式无法获取，只能通过offset系列来获取；
- offsetLeft和offsetTop可以获取没有定位的元素的left和top值；
- 通过e.style获取到的值是字符串类型，offset获取到的是数值类型（结果是四舍五入过的）；
- 只能通过offset获取属性的值，不能用来给元素赋值，style既可以获取值，也可以用来写入值。
二、scroll系列
scroll 用来获取元素内容的一些值
1、scrollWidth
元素中实际内容的宽度（不包括元素的边框），包括溢出的部分
2、scrollheight
元素中实际内容的高度（不包括元素的边框），包括溢出的部分
当元素中的内容不足或没有内容时，这两个属性获取到的是元素的宽高，和offsetWidth、offsetHeight获取到的值相同
3、scrollLeft
onscroll事件发生时,横向滚动条往右拉之后，内容往左卷曲出去的宽度
4、scrollTop
onscroll事件发生时,竖向滚动条向下拉之后，内容往上卷曲出去的高度
不同浏览器获取scrollLeft和scrollTop的兼容代码
function getScroll(){
return {
scrollTop= window.page.YOffset||document.documentElement.scrollTop||document.body.scrollTop;
scrollLeft=
window.page.XOffset||document.documentElement.scrollLeft||document.body.scrollLeft;
}
}
三、client系列
获取的是元素可视区的值
1、clientWidth
可视区域的宽度（没有边框）
2、clientHeight
可视区域的高度（没有边框）
3、clientLeft
可视区域距离左边边框的距离（左边边框的宽度）
4、clientTop
可视区域距离上边边框的距离（上边边框的宽度）