第52天：offset家族、scroll家族和client家族的区别

一、offset家族
1、offsetWidth offsetHeight offsetLeft offsetTop offsetParent共同组成了offset家族，用来获取元素尺寸。

offsetWidth = width + padding + border
offsetHeight = height + padding + border

2、offsetLeft 和 offsetTop:
返回距离上级带有定位的盒子左边的位置，如果父级元素没有定位，则以body为准
offsetLeft从父亲的padding开始算，父亲的border不算。

offsetParent:返回该对象的带有定位的父级，如果当前元素的父级元素没有
进行CSS定位，则offsetParent为body.如果当前元素的父级元素中有定位，则
取最近的父级元素

3、offsetLeft和style.left的区别
   1、最大区别在于offsetLeft可以返回没有定位的盒子距离左侧的位置
   而style.left不可以。
   2、offsetTop返回的是数字，而style.top返回的是字符串(24px),除了数字外，还
   带有单位。
   3、offsetTop只读，而style.top读写
   4、如果没有给HTML元素设置top样式，style.top返回的是空字符串。

二、scroll家族
1、scroll家族主要包括scrollWidth、scrollHeight、scrollLeft、 scrollTop、 onscroll事件
scrollWidth/scrollHeight是指内容的高度
scrollLeft/scrollTop指被卷去的左侧和头部(浏览器无法显示的部分)
一般调用document.body.scrollTop
2、onscroll滚动事件(window.onscroll = func)
屏幕每滚动一次，哪怕只有一个像素也会触发这个事件。这样就可以检测屏幕滚动了
只能有一个写了多个以最后一个为准，同理 window.onload
未声明 DTD（谷歌只认识他）
（IE9+认识他）document.body.scrollTop
已经声明DTD（IE678只认识他）
(IE9+任何时候)
   document.documentElement.scrollTop
火狐/谷歌/ie9+以上支持的(不管DTD)
   
3、window.pageYOffset

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

三、client家族

 1、 clientWidth:获取网页可视区域宽度
  clientHeight:获取网页可视区域的高度
  如果是盒子调用，指的是盒子本身
如果是body/html调用，指的是可视区域的大小
clientX:鼠标距离可视区域左侧距离(event调用)
clientY:鼠标距离可视区域上侧距离(event调用)
clientTop/clientLeft盒子的border宽高

2、client家族之:检浏览器宽/高度(可视区域)
    1、ie9及其以上的版本
   window.innerWidth/Height  
    2、标准模式（有DTD）（“CSS1Compat”）
   document.documentElement.clientWidth
   document.documentElement.clientHeight
    3、怪异模式 （没有DTD）
   document.body.clientWidth
   document.body.clientHeight

四、三个家族的区别:
  区别1：（offset/scroll/client宽高）

clientWidth  = width  + padding
clientHeight = height + padding
offsetWidth  = width  + padding + border
offsetHeight = height + padding + border
scrollWidth   = 内容宽度（不包含border）
scrollHeight  = 内容高度（不包含border）
  区别2：（offset/scroll/client上下）
offsetTop/offsetLeft ：
        调用者：任意元素。(盒子为主)
        作用：距离父系盒子中带有定位的距离。
scrollTop/scrollLeft:(盒子也可以调用，必须有滚动条)
        调用者：document.body.scrollTop/.....(window)
        作用：浏览器无法显示的部分（被卷去的部分）。
clientY/clientX:（clientTop/clientLeft 值的是border）
        调用者：event.clientX(event)
        作用：鼠标距离浏览器可视区域的距离（左、上）。

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。
比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。（类似Date）
普通浏览器支持 event（传参）
ie 678 支持 window.event（无参）

 

clientX/clientY  
当前窗口的左上角为基准点
pageX/pageY低版本浏览器（IE67）不支持
以当前文档的左上角为基准点   
screenX/screenY
当前屏幕的左上角为基准点