js三大系列

js中有一套方便的获取元素尺寸的办法：offset系列

offset常用属性（5个）
offsetWidth和offsetHeight————（检测盒子自身宽高+padding+border）
offsetLeft和offsetTop————（检测距离父盒子有定位的左/上面的距离）
offsetParent————（检测父系盒子中带有定位的父盒子节点）
offsetwidth和offsetheight

offset宽/高
盒子自身的宽/高 + padding +border;
（相较与client系列和scroll系列，这两个算宽高都不带边框。）
offsetWidth = width+padding+border;
offsetHeight = Height+padding+border;

offsetLeft和offsetTop

offsetLeft：返回距离上级盒子（带有定位）左边的位置，如果父级都没有定位则以body为准
offsetLeft和style.left的区别：
1最大区别在于offseLeft可以返回没有定位盒子的距离左侧的位置。 而 style.left不可以
2.offsetTop返回的是数字(值是四舍五入取整)，style.top返回的是字符串（除了数字外还带有单位px）
3.offsetTop只读，而style.top可读写，写入时是以行内样式写入
4.style.top只能获取行内式样式。如果没有给 HTML 元素指定过 top 样式，则.style.top 返回的是空字符串。

offsetParent：返回该对象的父级

如果当前元素的父级元素没有进行CSS定位（position为absolute或relative，fixed）,offsetParent为body。

如果当前元素的父级元素中有CSS定位,offsetParent取最近的那个父级元素

scroll系列

scrollWidth和scrollHeight
scrollHeight ：元素中内容的实际高，并不是元素的宽高;当元素中没有内容，或内容很少时，才得到元素的宽高，不包含border。

scrollLeft/scrollTop
计算元素卷曲出去的left和top值。
当元素为页面时，即计算页面卷曲出去的left和top时，有兼容问题：
（谷歌只认识他）（火狐IE9+认识他）认为是页面的body卷曲出去 document.body.scrollTop/scrollLeft
（IE678只认识他）(火狐IE9+认识他)认为是页面的HTML文档卷曲出去 document.documentElement.scrollTop/scrollLeft
（推荐使用）火狐/谷歌/ie9+以上支持的(不管DTD) window.pageXOffest/pageYOffest

client系列
clientWidth：可视区域的宽度（包括padding，不包括border）
clientHeight：可视区域的高度（包括padding，不包括border）

clientLeft：左边框（border）的宽度
clientTop：上边框（border）的宽度

clientX：鼠标在可视区域中的横坐标
clientY：鼠标在可视区域中的纵坐标