javaScript的三大家族

三大家族（offset/scroll/client）

快速查看
scrollTop/Left一般都是应用于计算浏览器卷去的部分，而且有兼容性问题，所以下面会举例将他们封装起来

offsetHeight:      元素高，height+border+padding
offsetWidth:       元素宽，width+border+padding
offsetTop:         上边距离带有定位的父盒子的距离（重要）
offsetLeft:		   左边距离带有定位的父盒子的距离（重要）
offsetParent:	   最近的带有定位的父盒子


scrollHeight:  		 内容高，不含border（内容！！！）
scrollWidth:         内容宽，不含border  （内容！！！）
scrollTop:  			
	document.documentELement.scrollTop || document.body.scrollTop || window.pageXOffset;; （重要）
			浏览器调用：浏览器页面被卷去的头部
	    	元素调用：必须具有滚动条的盒子调用。盒子本身遮挡住的子盒子内容。子盒子被遮挡住的头部
			
scrollLeft: 	document.documentELement.scrollLeft:  || document.body.scrollLeft: ; （重要）window.pageYOffset;
			浏览器调用：浏览器页面被卷去的左侧
	    	元素调用：必须具有滚动条的盒子调用。盒子本身遮挡住的子盒子内容。子盒子被遮挡住的左侧


clientHeight:   元素高，height+padding;   	
		window.innerHeight;	document.body.clientHeight     可视区域的高
clientWidth:    元素宽，width+padding;	  	
		window.innerWidth;	document.documentElementWidth; 可视区域的宽
		
clientTop:   	元素的上border宽
clientLeft:    	元素的左border宽

clientY		调用者：event.clientY(event)（重要）
		作用：鼠标距离浏览器可视区域的距离，上
clientX		调用者：event.clientX(event)（重要）
		作用：鼠标距离浏览器可视区域的距离，左			

offsetLeft和style.left区别

一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。 
而 style.left不可以

二、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
style.left只能获取行内式，如果没有返回“”;

三、offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋值）

四、如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。

1、offset家族 —表示偏移、位移的意思

offsetWidth和offsetHight、offsetLeft和offsetTop、offsetParent共同组成了offset家族。

a、offsetHight /offsetWidth

offset宽/高  =  盒子自身的宽/高 + padding +border；

offsetWidth = width+padding+border；

offsetHeight = Height+padding+border；

b、offsetLeft和offsetTop

检测距离父盒子有定位的左/上面的距离，如果父级都没有定位则以body为准。

offsetLeft == style.left(去掉px)

c、offsetParent

offsetParent 取最近的那个带定位父级元素。

2、Scroll家族

ScrollWidth 和 scrollHeight（不包括border）---盒子内容的宽高。
（！！！如果有内容超出了，显示内容的高度）

1.7.2	scrollTop 和 scrollLeft---网页，被浏览器遮挡的头部和左边部分。
（！！！感觉都是由于在浏览器上，用在盒子上没有效果）

兼容性写法

var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

var left = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;

3、onscroll事件

只要页面滚动就会触发

window.scrollTo 
方法可把内容滚动到指定的坐标。
格式：
scrollTo(xpos,ypos)
xpos	必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos	必需。要在窗口文档显示区左上角显示的文档的 y 坐标

client家族

1、clientWidth	获取网页可视区域宽度（两种用法）
   clientHeight	获取网页可视区域高度（两种用法）
 调用者不同，意义不同：
	 		盒子调用：	 		指盒子本身。
			body/html调用：		可视区域大小。	
			
2、clientX       鼠标距离可视区域左侧距离（event调用）
clientY       鼠标距离可视区域上侧距离（event调用）

3、clientTop/clientLeft 		盒子的border宽高