client家族

• clientWidth：獲取物件的內容可視區域的寬度，即clientWidth=width+左右padding，不包括滾動條。

• clientHeight：獲取物件的內容可視區域的高度，即clientHeight=height+上下padding，不包括滾動條。
  注：與內容是否溢位無關
  相容問題
  怪異模式與標準模式下獲取clientWidth的方法不一樣

//求瀏覽器視口尺寸
function getViewportOffset(){
    if(window.innerWidth){
        return {
            w : window.innerWidth,
            h : window.innerHeight
        }
    }else if(document.compatMode === 'BackCompat'){//怪異模式
       
        return {
            w : document.body.clientWidth,
            h : document.body.clientHeight
        }
    }else{
         //標準模式 document.compatMode === 'CSS1Compat'
        return {
            w : document.documentElement.clientWidth,
            h : document.documentElement.clientWidth
        }
    }
}
 

• clientTop：獲取物件的上邊框的寬度。

• clientLeft：獲取物件的左邊框的寬度。

scroll家族

• scrollWidth：獲取物件內容的實際寬度，scrollWidth=左padding+width

• scrollHeight：獲取物件內容的實際高度，scrollHeight=上padding+height

===============================================

• scrollTop：頁面卷出視口的高度

• scrollLeft：頁面卷出視口的寬度
  相容問題

//求滾動條滾動距離
function getScrollOffset(){
    if(window.pageXOffset){
        return {
            x : window.pageXOffset,//IE8以下不相容
            y : window.pageYOffset
        }
    }else{
        return {
            x : document.body.scrollLeft + document.documentElement.scrollLeft,//IE8以下用
            y : document.body.scrollTop + document.documentElement.scrollTop
        }
    }
}
 

offset家族

• offsetWidth：獲取物件的寬度，即offsetWidth=width+左右padding+左右border。也可以寫成offsetWidth=clientWidth+border。

• offsetHeight：獲取物件的高度，即offsetHeight=height+上下padding+上下border。也可以寫成offsetHeight=clientHeight+border。

Bug

offsetLeft 指的是元素與offsetParent之間的距離

首先確定offsetParent
在IE8+，等高版本瀏覽器中
假如祖先元素中都沒有定位，offsetParent就是body元素，假如祖先元素中有定位，則以最近的帶有定位的祖先元素為準，與自己是否定位無關
在IE6/7瀏覽器中
自身沒有定位，參考的是最近的有寬高的祖先元素，沒有寬高參考的是body
自身有定位與高版本瀏覽器一致
offsetLeft
IE9+和高版本瀏覽器
元素自身左邊框外部到offsetParent左邊框內部的距離
IE8
比高版本瀏覽器的offsetLeft多一個offsetParent邊框
相容處理：*
1.自身元素相對定位