Js中三大家族：offset，scroll，client
Offset
offsetWidth和offsetHeight一样，就拿offsetWidth举例子。
offsetWidth和offsetHeight：
自身的宽高，等于width+padding+border；如果没有设置宽高，则返回内容的宽高。
obj.offsetWidth和obj.style.width。的区别：
- obj.style.width得到的是一个带有px的字符串，而offsetWidth得到的是一个数字。
- obj.style.width只能得到行内式的，而offsetWidth可以得到外部，内部，内链。
- obj.style.width可以进行读写，而offsetWidth只能读。
- 没有设置宽高Obj.style.width会得到undefined，而offsetWidth得到内容的具体宽高。
offsetLeft和offsetTop：offsetLeft和offsetTop一样，就拿offsetLeft来说：
它是返回距离最近并且带有定位的父元素之间的距离，如果所有的父元素都没有定位，则返回距离body的距离，返回的值是个数字。
它们之间距离的基线是以该元素的border为准，然后到达父元素的padding（不包括父元素的border）；
offsetLeft和obj.style.left的区别：
最大的区别：offsetLeft可以返回一个没有定位的盒子到父盒子的左边距离，而obj.style.left不可以。
offsetLeft只读，obj.style.left可以读写。
offsetLeft返回的是数字，obj.style.left返回的是字符串。
如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。
offsetParent 返回该元素的带有定位的父元素。
Scroll
Scroll可以理解为页面滚来滚去，就是页面长，滚动滑轮，使之页面也滚动。
scrollWidth和scrollHeight：
scrollWidth和scrollHeight一样，就拿scrollWidth来说。它们不包括border。也就是：width+padding。如果内容超出了，则显示内容的高度和宽度。
一、未声明 DTD（谷歌只认识他）（怪异浏览器）
document.body.scrollTop
二、已经声明DTD（IE678只认识他）
document.documentElement.scrollTop
三、火狐/谷歌/ie9+以上支持的（标准浏览器）
window.pageYOffset
为了处理兼容问题：
var scrollTop =
document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop || 0;
或者封装一个函数。
function scroll(){
if(window.pageXOffset){ //标准浏览器
return{
top:window.pageYOffset,
left:window.pageXOffset
}
}else if(document.compatMode == 'CSS1Compat'){ //声明了DTD 只有谷歌识别
return{
top:document.documentElement.scrollTop,
left:document.documentElement.scrollLeft
}
}else{ //怪异浏览器 就是没有声明DTD
return{
top:document.body.scrollTop,
left:document.body.scrollLeft
}
}
}
Client
clientWidth 获取网页可视区域宽度（两种用法）
clientHeight 获取网页可视区域高度（两种用法）
调用者不同，意义不同：
盒子调用： 指盒子本身。width+padding
body/html调用： 可视区域大小。
clientX 鼠标距离可视区域左侧距离（event调用）
clientY 鼠标距离可视区域上侧距离（event调用）
对client进行封装
function client(){
if (window.innerHeight) { //标准浏览器 ie9+
return{
width:window.innerWidth,
height:window.innerHeight
}
}else if(document.compatMode == 'CSS1Compat'){ //声明了DTD 只有谷歌识别
return{
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
}
}else{ //没有声明DTD 怪异浏览器
return {
width:document.body.clientWidth,
height:document.body.clientHeight
}
}
}