js三大家族

整理自撩课学院 www.itlike.com

一、offSet家族

1、概念

offSet 自己的，用于获取元素尺寸

1）offsetWidth 和 offsetHeight

获取对象自身的宽度和高度 ，包括内容、边框和内边距，即：offsetWidth = width + border + padding

2）offsetLeft 和 offsetTop

• 距离第一个有定位的父级盒子左边和上边的距离
• 父级盒子必须要有定位，如果没有，则最终以body为准！
• offsetLeft和offsetTop从从父标签的padding开始计算，不包括border。即：从子盒子边框到定位父盒子边框的距离。

3）offsetParent

• 返回当前对象的父级（带有定位）盒子，可能是父亲、也可能是爷爷
• 如果当前元素的父级元素没有进行CSS定位（position：absolute 或 relative），则其offsetParent为body
• 如果当前元素的父级元素中有进行CSS定位（position：absolute或relative），则其offsetParent取最近的那个父级元素

4）offsetXXX 和 style.XXX的区别

• style.left只能获取行内的，而offsetLeft则可以获取到所有的；
• offsetLeft 可以返回没有定位盒子距离左侧的位置；而style.left不可以，其只能返回有定位盒子的left;
• offsetLeft 返回的是数字，而 style.left 返回的是字符串，除了数字外还带有单位：px;
• offsetLeft是只读的，而style.left是可读写；
• 如果没有给 当前 元素指定过 top 样式，则 style.top 返回的是空字符串。

二、scroll家族

1、概念

• 网页正文全文宽： document.body.scrollWidth
• 网页正文全文高： document.body.scrollHeight
• 网页被卷去的高： document.body.scrollTop
• 网页被卷去的左： document.body.scrollLeft
• 注意：在实际开发中使用比较多的就是scrollTop

2、适配

1）ie9+ 和 最新浏览器

• window.pageXOffset; （scrollLeft）
• window.pageYOffset; （scrollTop）
  2）Firefox浏览器 和 其他浏览器
• document.documentElement.scrollTop
  3）Chrome浏览器 和 没有声明 DTD
• document.body.scrollTop
  4）兼容写法
• var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
• var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;

3、scrollTo(x,y)

• 把内容滚动到指定的坐标
• 格式：scrollTo(xpos,ypos)

三、scroll家族

1、概念

1）clientWidth和clientHeight

• 网页可见区域宽： document.body.clientWidth;
• 网页可见区域高： document.body.clientHeight;
  2）clientLeft和clientTop
• 返回的是元素边框的borderWidth
• 如果不指定一个边框或者不定位该元素，其值就为0

2、offset、client和scroll的区别分析

1）left和top分析

• clientLeft: 左边边框的宽度；clientTop: 上边边框的宽度
• offsetLeft: 当前元素距离有定位的父盒子左边的距离；offsetTop: 当前元素距离有定位的父盒子上边的距离
• scrollLeft: 左边滚动的长度; scrollTop: 上边滚动的长度
  2）width和height分析
• clientWidth/Height: 内容 + 内边距
• offsetWidth/Height: 内容 + 内边距 + 边框

• scrollWidth/Height: 滚动内容的宽度和高度

  
  
  宽度/高度.png

3）获取屏幕的可视区域
1）ie9及其以上的版本、最新浏览器
* window.innerWidth, window.innerHeight
2）标准模式浏览器
* document.documentElement.clientWidth, document.documentElement.clientHeight
3）怪异模式

• document.body.clientWidth, document.body.clientHeight
  4）封装写法

function client() {    
       if(window.innerWidth){ // ie9及其以上的版本  
           return{           
               width: window.innerWidth,
               height:  window.innerHeight  
           }    
       }else if(document.compatMode !== 'CSS1Compat'){  // 怪异模式  
           return{           
               width: document.body.clientWidth,            
               height: document.body.clientHeight       
           }    
       }  
       // 标准    
       return{      
             width: document.documentElement.clientWidth,        
             height: document.documentElement.clientHeight   
       }
}