js中的各种位置（offset scorll cilent）

js中有 offset scorll client 俗称“三大家族”。

• offset家族：

 offsetheight=height+padding+border;

 offsetwidth=width+padding+border;(offsethight和offsetwidth都不包括margin)；

两者调用对象均为盒子！　　

offsettop=距离最近一个有定位的父盒子的上边的距离；　　　　

offsetleft=距离最近一个有定位的父盒子的左边的距离；(除了static定位其他的都可以)

如果找不到有定位的父盒子则以body为准！　　

如果在行内式中给定 style.left，则style.left==offsetleft。

offsetleft与style.left的区别：

一.offsetleft可以返回左侧没有定位的距离，即与body的距离。而style.left只能获取行内式；

二.offsetleft返回的是数字，而style.left返回的是字符串！　　

三.offsetleft只能获取值，而style.left可以赋值；

四.如果没有给style.left赋值，则返回空字符串。

•        scorll家族

scrollwidth和scrollheight在盒子内容没有超出盒子的宽高的情况下=width/height+border，如果超出盒子高度，即为内容本身的高度。

scrolltop和scrollleft =被卷去的高度或者宽度，他们的调用者不是盒子（盒子也可以调用但是必须有滚动条）！　　

关于兼容性问题：

先判断window.pageYoffset！==undefind

如果为true则 top：window.pageYoffset；

else则判断有没有DTD声明

如果为true则 top：document.documenElement.scrollTop

else则为 top：document.body.scrollTop；

•        client家族

clientWidth和clientHeight 在盒子调用的时候 指的是本盒子的宽高。

在其他调用时 兼容性问题先判断 

window.innerWidth是不是存在

else判断是不是有DTD

如果有document.documentElement.clientWidth

else  docunment.body.clientWidth

 

 

clientX event 调用 鼠标距离可视左边的距离！

pageX  是距离body的距离！