三大家族（offset、scroll、client）

offset

---

• 用于获取当前元素尺寸
• 5个属性

  属性	含义	值
  offsetWidth	获取对象自身的宽	width+border+padding
  offsetHeight	获取对象自身的高	height+border+padding
  offsetLeft	距离最近的第一个有定位父级盒子左边的距离，如无定位则以body为准	从父标签的padding开始计算，不包括border
  offsetTop	距离最近的第一个有定位父级盒子上边的距离，如无定位则以body为准	从父标签的padding开始计算，不包括border
  offsetParent	返回当前对象的父级（带定位）盒子，无定位返回body	---

• offset与style的区别
  1. style.left只取行内样式，offsetLeft可以获取到所有的样式。
  2. offsetLeft可以返回无定位盒子的左距离；而style.left只能返回有定位的盒子距离。
  3. offsetLeft返回的是数字，而style.left返回的是字符串，还带单位px。
  4. offsetLeft是只读的；style.left是可写的。
  5. 若无指定当前元素top，则style.top返回空字符串。

scroll

---

• 与滚动事配合使用（onscroll）

• 4个属性

  1. document.body.scrollWidth =>网页正文全文宽
     scrollWidth =>元素中能够滚动的内容的宽度
  2. document.body.scrollHeight =>网页正文全文高
     scrollHeight =>元素中能够滚动的内容的高度
  3. document.body.scrollTop => 页面被卷去的高
  4. document.body.scrollLeft => 页面被卷去的宽

• 浏览器兼容

  1. 严格模式：document.compatMode = CSS1Compat
  2. 怪异模式：document.compatMode = BackCompat
  3. 兼容方式：高版本浏览器 || 严格模式 || 怪异模式
     var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
  4. 封装成工具类
     • 获取被卷去的宽或者高

     scroll:function () {
         if(window.pageYOffset !== null){
             return{
                 "top":window.pageYOffset,
                 "left":window.pageXOffset
             }
         }else if (document.compatMode === 'CSS1Compat'){
             return {
                 "top":document.documentElement.scrollTop,
                 "left":document.documentElement.scrollLeft
             }
         }
         return {
             "top":document.body.scrollTop,
             "left":document.body.scrollLeft
         }
     }
     

     • 获取能够滚动的内容的宽或者高

     scrollText:function () {
         if (document.compatMode === 'CSS1Compat'){
             return {
                 "height":document.documentElement.scrollHeight,
                 "width":document.documentElement.scrollWidth
             }
         }
         return {
             "height":document.body.scrollHeight,
             "width":document.body.scrollWidth
         }
     }
     

client

---

• 与窗口尺寸事件配合使用（onresize）
• 4大属性

  属性	值
  clientWidth	可视区域宽：width + padding
  clientHeight	可视区域高：height + padding
  clientLeft	盒子左边边框宽
  clientTop	盒子上边边框宽

• 获取屏幕可视区域（兼容模式）
  ie9以上版本最新浏览器 || 标准模式 || 怪异模式
  var clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var clientHeigth = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

附：事件

---

1. 拿到事件

btn.addEventListener("click", function (ev1) {
        // 兼容方式拿到事件对象
          var e = ev1 || window.event;
}

2. 事件对象的属性和用途

   属性	用途
   clientX	光标相对于网页的水平位置
   clientY	光标相对于网页的垂直位置
   type	事件的类型
   target	改事件被传送到的对象
   screenX	光标相对于该屏幕的水平位置
   screenY	光标相对于该屏幕的垂直位置
   pageX	光标相对于该网页的水平位置（包括卷去的部分，不适用于IE）
   pageY	光标相对于该网页的垂直位置（包括卷去的部分，不适用于IE）
   width	该窗口或框架的宽度
   height	该窗口或框架的高度
   data	返回拖拽对象的URL字符串