js中offset，client等属性值分析

1.offset的5个成员

1. offsetWidth(width+border+padding):表示元素除去margin后的元素宽度
2. offsetHeight(height+border+padding):表示元素除去margin后的元素高度
3. offsetLeft：表示距离有定位的父级的left值（用offsetParent可以用来测试）
4. offsetTop：表示距离有定位的父级的top值（也是用offsetParent用来确定）
5. offsetParent：用来确定有定位的父级元素是哪一个元素2

2.scroll的成员

1. scrollWidth：表示去除border的盒子原素的宽度
2. scrollHeight：表示去除border的盒子元素的高度
3. scrollTop：表示页面上面被遮挡的部分
4. scrollLeft：表示页面左边备遮挡的部分

   scrollTop和scrollLeft是有兼容问题的，必须使用以下代码进行兼容

document.body.scrollTop //未声明 DTD（谷歌只认识他）
document.body.scrollLeft//未声明 DTD（谷歌只认识他）

document.documentElement.scrollTop//已经声明DTD（IE678只认识他）

window.pageYOffset//火狐/谷歌/ie9+以上支持的

//综合的写法
document.title = window.pageYOffset ||document.body.scrollTop ||document.documentElement.scrollTop;

  3.client家族

1. clientX和clientY表示的是鼠标点击的位置，都是通过event来获得的。

2. clientWidth和clientHeight （调用者不同，意义不同）表示获取网页可视区域的宽度和高度。

3. clientTop和clientLeft 表示的是盒子的border的宽高。