JS的三大家族（Offset，Scroll，Client）及它们的兼容性写法

一、Offset家族

offser家族的成员，获取的值都是经过四舍五入得到的值，表示的是位移
如：

div.style.left = "156.4px";
//当获取div的offsetLeft值时，将值进行四舍五入
console.log(div.offsetLeft);//将会得到——156
div.style.left = "156.7px";
//当获取div的offsetLeft值时
console.log(div.offsetLeft);//将会得到——157

1. Offset的五个成员：

• offsetWidth（width+border+padding）

  表示该元素除去外边距之后的宽度 (不包含margin)

• offsetHeight（height+border+padding）

  表示该元素除去外边距之后的高度(不包含margin)

  

• offsetLeft

  表示距离有定位的父级的left值（若无定位，以body为参照）

• offsetTop

  表示距离有定位的父级的top值（若无定位，以body为参照）

• offsetParent

  返回有定位的父级（若没有定位则为body）

2. offsetLeft和style.left的区别

1. （最大区别）
   
   • offsetLeft可以返回没有定位盒子的距离左侧的位置（返回的是距离带有定位的父系盒子的left值）。
   • 如果父系盒子中都没有定位，以body为准。
   • style.left只能获取行内样式的值，不能获取CSS或JS中的left值，如果没有返回空字符串。

2. 返回值

   • offsetTop 返回的是数字，而 style.top 返回的是字符串
   • 除了数字外还带有单位：px。
   • 例如： div.offsetLeft = 100; div.style.left = “100px”;

3. offsetTop 只读，而 style.top 可读写。

   • style.left和style.top可以赋值，可以获取值
   • offsetLeft和offsetTop只能获取值

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

二、scroll家族

1. scroll家族成员：

• scrollWidth： 表示的是除去border的盒子宽度

  • scrollWidth=width+padding

• scrollHeight

  • ① 当盒子内容超出了盒子的高度，scrollHeight=盒子内容的高度

  • ② 当盒子内容高度<=盒子的高度,scrollHeight=盒子的高度

• scrollTop 和 scrollLeft

  • ① scrollTop表示的是页面被浏览器遮挡的头部

    页面向下滑动了多少像素

  • ② scrollLeft表示的是页面被浏览器遮挡的左边部分

    页面向右滑动了多少像素

//利用window.onscroll来获取
window.onscroll = function () {
    document.title = document.body.scrollTop+"     "+document.body.scrollLeft;
}

2. scrollTop和scrollLeft的兼容问题

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

document.body.scrollTop;

• 二、已经声明DTD（IE678只认识他）

 document.documentElement.scrollTop;

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

window.pageYOffset;

例如：

// 没有dtd约束的
document.title = document.body.scrollTop;
//有dtd约束的
document.title = document.documentElement.scrollTop;

3. 兼容写法

document.title = window.pageYOffset ||document.body.scrollTop ||document.documentElement.scrollTop;

4. 补充： compatMode的用法

用于判断页面是否有DTD

• 声明了DTD——compatMode==CSS1Compat
• 没声明DTD——compatMode==BackCompat

alert(document.compatMode);//判断页面是否有dtd

5. window.scrollTo()方法可把内容滚动到指定的坐标。

格式：

scrollTo(xpos,ypos);
//xpos  必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
//ypos  必需。要在窗口文档显示区左上角显示的文档的 y 坐标

6. scroll()方法的封装

function scroll() {
 //直接return一个json对象
   return {
       "left":window.pageXOffset || document.documentElement.left || document.body.scrollLeft,
       "top":window.pageYOffset || document.documentElement.top || document.body.scrollLeft
   };
}

调用时，直接用scroll().top和scroll().left获得值，即可。

三、 client家族

1. clientY和clientX表示的是鼠标在可视区域的坐标值

• clientX：鼠标距离可视区域左侧距离（event调用）
• clientY：鼠标距离可视区域上侧距离（event调用）

2. 重点： clientWidth和clientHeight （调用者不同，意义不同）

• clientWidth： 获取网页可视区域宽度

• clientHeight：获取网页可视区域高度

  1. 盒子调用： padding+（width/height）
  2. body/html调用：表示浏览器可视区域的大小

3. clientTop和clientLeft 表示的是盒子的border的宽高

4. client家族的特殊用法：检测浏览器（可视区域）的宽/高度

//获取浏览器可视区域的宽高的兼容性写法
function client() {
    if(window.innerHeight !== undefined){
        return {
            "height":window.innerHeight,
            "width":window.innerWidth
        }
    }else if(document.compatMode == "CSS1Compat"){
        return {
            "height":document.documentElement.clientHeight,
            "width":document.documentElement.clientWidth
        }
    }else {
        return {
            "height":document.body.clientHeight,
            "width":document.body.clientWidth
        }
    }
}

5. pageY和screenY和clientY之间的区别

• 1.event.pageY

  表示单击时的位置距离body顶部的top值

• 2.event.screenY

  表示单击时的位置距离屏幕顶部的位置，当移动缩放浏览器窗口时，event.screenY值会随着改变

• 3.event.clientY

  表示单击时的位置距离浏览器可视区域的top值

6. （补充知识） onresize()事件

只要浏览器的大小改变，就会触动该事件的发生
window.onresize()

7. （补充知识）获取屏幕宽高（分辨率）

获取所用设备的分辨率

• window.screen.width：屏幕的宽度
• window.screen.height： 屏幕的高度