三大家族

1.offset家族

offset这个单词本身是--偏移，补偿，位移的意思。

js中有一套方便的获取元素尺寸的办法就是offset家族,offsetWidth、offsetHight 以及offsetLeft、offsetTop、offsetParent共同组成了offset家族。

1. offsetWidth和offsetHeight（检测自身盒子宽高+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. offsetLeft和style.left的区别：

• 最大的区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置，而style.left不行
• offsetLeft返回的是number型，而style.left返回的是string型，且带有单位px
• offsetLeft只读，而style.left可读写
• 还有只有写在行内样式的left，才可以被style.left拿到 ，否则返回的就是空字符串。

5.offsetTop和style.top同上

2. Scroll家族组成

1. scrollWidth和scrollHeight( 不包括border 和 margin)

• scrollWidth = 盒子本身width+padding
• 检测盒子的宽高。（调用者：节点元素。属性。）
• 盒子内容的宽高。（如果有内容超出了，显示内容的宽高度,不超过则为盒子本身的宽高度）
• IE567可以比盒子小。 IE8+火狐谷歌不能比盒子小

2. scrollTop和scrollLeft

• 网页，被浏览器遮挡的头部和左边部分。
• 被卷去的头部和左边部分。
• 兼容问题：
  一、未声明 DTD（谷歌只认识他、IE9+）、document.body.scrollTop
  二、已经声明DTD（IE678只认识他、IE9+任何时候）、document.documentElement.scrollTop
  三、火狐/谷歌/ie9+以上支持的、window.pageYOffset

说简单点：就是谷歌只识别 document.body, 而IE只识别document.documentElement
火狐才有DTD的声明问题。

兼容写法：
      var top = window.pageYOffset
            || document.documentElement.scrollTop
            || document.body.scrollTop;
或    var top = document.body.scrollTop + document.documentElement.scrollTop;

判断页面是否已声明DTD
document.compatMode === 'BackCompat'
BackCompat    -- 未声明
CSS1Compat    --- 声明


    // scroll方法的封装
    // 需求: 封装一个兼容的scroll(),返回值是json,用scroll().top获取scrollTop的属性
    function scroll() {
        // 如果存在,返回0~无穷大
        // 不存在返回undefined
        // 兼容谷歌、火狐以及IE9+
        if (window.pageYOffset !== undefined) {
            return {
                "top": window.pageYOffset,
                "left": window.pageXOffset
            };
        } else if (document.compatMode === 'CSS1Compat') {
            // IE9以下的  还需要判断是否已声明DTD，CSS1Compat标识已声明
            return {
                "top": document.documentElement.scrollTop,
                "left": document.documentElement.scrollLeft
            };
        } else {
            return {
                "top": document.body.scrollTop,
                "left": document.body.scrollLeft
            }
        }


        // 实际使用的
//       return {
 //           "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
 //           "left": window.pageYOffset || document.body.scrollLeft || document.documentElement.scrollLeft
//        }

    }

3. 获取title、body、head、html标签

• document.title --- 文档标题；
• document.head --- 文档的头标签
• document.body --- 文档的body标签；
• document.documentElement --- 这个很重要，它表示文档的html标签， 也就是说，基本结构当中的html标签并不是通过document.html 去访问的，而是document.documentElement

3. client家族

1. clientWidth和clientHeight

• 调用者不同，意义不同：
  • 盒子调用： 指盒子本身。
  • body/html调用： 可视区域大小。
• clientX： 鼠标距离可视区域左侧距离（event调用）
• clientY： 鼠标距离可视区域上侧距离（event调用）
• clientTop / clientLeft : 盒子的border宽高

兼容写法：
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

2.三大家族的区别：

1. width和height：

clientWidth  = width  + padding
clientHeight  = height + padding
offsetWidth  = width  + padding + border
offsetHeight  = height + padding + border
scrollWidth   = 内容宽度（不包含border）
scrollHeight  = 内容高度（不包含border）

2. top和left:

offsetTop/offsetLeft ：
        调用者：任意元素。(盒子为主)
        作用：距离父系盒子中带有定位的距离。
scrollTop/scrollLeft:(盒子也可以调用，必须有滚动条)
        调用者：document.body.scrollTop/.....(window)
        作用：浏览器无法显示的部分（被卷去的部分）。
clientY/clientX:（clientTop/clientLeft 值的是border）
        调用者：event.clientX(event)
        作用：鼠标距离浏览器可视区域的距离（左、上）。

3.缓动动画原理

leader = leader + (target - leader) /10;
盒子位置 = 盒子本身位置 + （目标位置 - 盒子本身位置）/10
动画原理: 目标位置 = 盒子位置 + 步长
//   需注意的一点是: JS实际运算时会四舍五入取整,然后计算
//   获取盒子距离左侧具有定位的父盒子的距离（没有的body），四舍五入取整。
//   style.left获取的是具体值。


  
/***
 *缓动动画封装
 * @param ele
 * @param target
 * @param type [left || top]
 */
function animate(ele, target, type) {
    // 开始动画 首先要清除定时器
    clearInterval(ele.timer);

     // 开始定时器
    ele.timer = setInterval(function () {

        // 开闭原则
        var CLOSE_INTERVAL = false; // 是否关闭定时器

        //遍历属性和值，分别单独处理json
        //attr == k(键)    target == json[k](值)
        for (var k in json) {
            // 动画原理: 盒子位置 = 盒子位置 + ((目标位置 - 盒子自身位置)/10)
            // 1.获取步长   (目标位置 - 盒子自身位置)/10
            var leader = parseInt(getStyle(ele, k)) || 0;
            var step = (json[k] - leader) / 10;
            // 2. 二次加工, 小于0向下取整  或  大于0向上取整
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            // 3.移动  盒子位置 = 盒子位置 + 步长
            leader = leader + step;
            ele.style[k] = leader + "px";
            // 4.清除定时器的条件  当步长  大于 (目标位置 - 盒子自身位置)
            // 不考虑小数的情况下,只要目标位置和当前位置不相等，就不能清除清除定时器。
            if (Math.abs(json[k]  - leader) > Math.abs(step)) {
                CLOSE_INTERVAL = true;
            }
        }

        //只有所有的属性都到了指定位置，CLOSE_INTERVAL值才不会变成true；
        if (!CLOSE_INTERVAL) {
            // 将盒子位置直接赋为 目标位置
            // ele.style[type] = target + "px";
            clearInterval(ele.timer);
            callback && callback();
        }
    }, 25);
}

// 获取元素样式的兼容写法
function getStyle(ele, attr) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(ele, null)[attr];
    }
    return ele.currentStyle[attr];
}

元素位置及事件