JS三大家族

个人博客新地址：→点我♪(＾∀＾●)ﾉ

就像几种不同的生物在JJZZ zz

Offset家族简介

offset这个单词本身是­­偏移，补偿，位移的意思。js中有一套方便的获取元素尺寸的办法就是offset家族；

1. offsetWidth和offsetHight

   检测盒子自身宽高+padding+border
   这两个属性，他们绑定在了所有的节点元素上。只要调用这两个属性，我们就能够获取元素节点的宽和高。

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

   offsetWidth = width+padding+border
offsetHeight = Height+padding+border

2. offsetLeft和offsetTop

   检测距离父盒子有定位的左/上面的距离

   返回距离上级盒子（带有定位）左边/上边的位置

   如果父级都没有定位则以body为准

   计算基准：offsetLeft 从父亲的padding开始算,不是从父亲的border不算。

   在父盒子有定位的情况下:offsetLeft == style.left(去掉px)

3. offsetParent

   检测父系盒子中带有定位的父盒子节点

   • 返回改对象的父级（定位的父级）

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

   • 如果当前元素的父级元素中有CSS定位 （position为absolute或
     relative，fixed）， offsetParent取最近的那个父级元素

4. 区别

   • offsetTop 返回的是数字， style.top 返回的是字符串，除了数字外还带有单位:px。

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

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

Scroll家族

scroll家族通俗说就是滚来滚去的家族

1. ScrollWidth和scrollHeight

   检测盒子的宽高。（调用者：节点元素。属性。）
   盒子内容的宽高。（如果有内容超出了，显示内容的高度）
   IE67可以比盒子小。 IE8+火狐谷歌不能比盒子小

2. scrollTop和scrollLeft

   网页，被浏览器遮挡的头部和左边部分。
   就是被卷去的头部和左边部分。

3. 兼容性问题

   • 未声明 DTD（谷歌只认识他）

     document.body.scrollTop

   • 已经声明DTD（火狐，IE只认识他）

     document.documentElement.scrollTop

   • 火狐/谷歌/ie9+以上支持的

     window.pageYOffset

event家族（client家族）

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

他是一个事件中的内置对象。内部装了很多关于鼠标和事件本身的信息

1. 事件对象的获取（event的获取）

   IE678中获取方式为：window.event

   在火狐谷歌中，event或者在事件绑定的函数中默认参数，这个参数就
   是event.

   Box.onclick = function (ev){ ev我是啊 }

2. 兼容的获取写法

   • 不写参数直接使用event;
   • 写参数，但是为event….var event = event || window.event;(主
     要用这种)

3. screenX、pageX和clientX的区别

   • PageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。（页面）

   • ScreenY/screenX: 鼠标位于屏幕的上方和左侧的距离。（屏幕）

   • ClientX/clientY: 鼠标位于浏览器的左侧和顶部的距离。（浏览器大小和位置）

   • 兼容写法:
     在页面位置就等于 = 看得见的+看不见的

     pageY/pageX=event.clientY/clientX+scroll().top/scroll().left

兼容函数

/**
 * 获取滚动条距离顶部和左侧的距离，兼容IE6+,Firefox,Chrome等
 */
function scroll(){
    // 判断是否有window.pageXOffset
    if (window.pageYOffset){
        return {
            top: pageYOffset,
            left: pageXOffset
        };
    }
    // 再判断是否有声明DTD
    else if(document.compatMode == 'BackCompat'){
        return {
            top: document.body.scrollTop,
            left: document.body.scrollLeft
        }
    }
    // 默认使用documentElement
    else{
        return {
            top: document.documentElement.scrollTop,
            left: document.documentElement.scrollLeft
        }
    }
}
/*
*
*  兼容client*/
function client(){
    if (window.innerWidth){ // IE9+或其它浏览器
        return {
            width: window.innerWidth,
            height: window.innerHeight
        }
    }else if(document.compatMode === "CSS1Compat"){
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        }
    }else{
        return{
            width: document.body.clientWidth,
            height: document.body.clientHeight
        }
    }
}