整理自撩課學(xué)院 www.itlike.com

一、offSet家族

1、概念

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

1）offsetWidth 和 offsetHeight

獲取對象自身的寬度和高度 ，包括內(nèi)容、邊框和內(nèi)邊距，即：offsetWidth = width + border + padding

2）offsetLeft 和 offsetTop

• 距離第一個有定位的父級盒子左邊和上邊的距離
• 父級盒子必須要有定位，如果沒有，則最終以body為準(zhǔn)！
• offsetLeft和offsetTop從從父標(biāo)簽的padding開始計算，不包括border。即：從子盒子邊框到定位父盒子邊框的距離。

3）offsetParent

• 返回當(dāng)前對象的父級（帶有定位）盒子，可能是父親、也可能是爺爺
• 如果當(dāng)前元素的父級元素沒有進(jìn)行CSS定位（position：absolute 或 relative），則其offsetParent為body
• 如果當(dāng)前元素的父級元素中有進(jìn)行CSS定位（position：absolute或relative），則其offsetParent取最近的那個父級元素

4）offsetXXX 和 style.XXX的區(qū)別

• style.left只能獲取行內(nèi)的，而offsetLeft則可以獲取到所有的；
• offsetLeft 可以返回沒有定位盒子距離左側(cè)的位置；而style.left不可以，其只能返回有定位盒子的left;
• offsetLeft 返回的是數(shù)字，而 style.left 返回的是字符串，除了數(shù)字外還帶有單位：px;
• offsetLeft是只讀的，而style.left是可讀寫；
• 如果沒有給 當(dāng)前 元素指定過 top 樣式，則 style.top 返回的是空字符串。

二、scroll家族

1、概念

• 網(wǎng)頁正文全文寬： document.body.scrollWidth
• 網(wǎng)頁正文全文高： document.body.scrollHeight
• 網(wǎng)頁被卷去的高： document.body.scrollTop
• 網(wǎng)頁被卷去的左： document.body.scrollLeft
• 注意：在實際開發(fā)中使用比較多的就是scrollTop

2、適配

1）ie9+ 和 最新瀏覽器

• window.pageXOffset; （scrollLeft）
• window.pageYOffset; （scrollTop）
  2）Firefox瀏覽器 和 其他瀏覽器
• document.documentElement.scrollTop
  3）Chrome瀏覽器 和 沒有聲明 DTD <DOCTYPE >
• 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)

• 把內(nèi)容滾動到指定的坐標(biāo)
• 格式：scrollTo(xpos,ypos)

三、scroll家族

1、概念

1）clientWidth和clientHeight

• 網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth;
• 網(wǎng)頁可見區(qū)域高： document.body.clientHeight;
  2）clientLeft和clientTop
• 返回的是元素邊框的borderWidth
• 如果不指定一個邊框或者不定位該元素，其值就為0

2、offset、client和scroll的區(qū)別分析

1）left和top分析

• clientLeft: 左邊邊框的寬度；clientTop: 上邊邊框的寬度
• offsetLeft: 當(dāng)前元素距離有定位的父盒子左邊的距離；offsetTop: 當(dāng)前元素距離有定位的父盒子上邊的距離
• scrollLeft: 左邊滾動的長度; scrollTop: 上邊滾動的長度
  2）width和height分析
• clientWidth/Height: 內(nèi)容 + 內(nèi)邊距
• offsetWidth/Height: 內(nèi)容 + 內(nèi)邊距 + 邊框

• scrollWidth/Height: 滾動內(nèi)容的寬度和高度

  
  
  寬度/高度.png

3）獲取屏幕的可視區(qū)域
1）ie9及其以上的版本、最新瀏覽器
* window.innerWidth, window.innerHeight
2）標(biāo)準(zhǔn)模式瀏覽器
* 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       
           }    
       }  
       // 標(biāo)準(zhǔn)    
       return{      
             width: document.documentElement.clientWidth,        
             height: document.documentElement.clientHeight   
       }
}