clientHeight , scrollHeight , offsetHeight

wupp5f1ev 2018-03-13

展開全文

clientHeight , scrollHeight , offsetHeight相信每個人都用過,，可是每次用都要查一下到底哪個是文檔大小哪個是視口大小,，還有頭疼的兼容問題,。

先來官方的了解一下這三個屬性：

clientHeight：元素客戶區(qū)的大小,，指的是元素內(nèi)容及其邊框所占據(jù)的空間大?。ń?jīng)過實踐取出來的大多是視口大?。?/li>
scrollHeight: 滾動大小，指的是包含滾動內(nèi)容的元素大?。ㄔ貎?nèi)容的總高度）
offsetHeight: 偏移量,，包含元素在屏幕上所用的所有可見空間（包括所有的內(nèi)邊距滾動條和邊框大小，不包括外邊距

看起來解釋很清晰,，可是用起來好像沒有這么容易啊,，當然,，各個瀏覽器的表達方式不同確實要背鍋，不過,，當用這些個屬性的時候免不了要面對這兩個東西的差異,，document.body和document.documentElement，同樣的屬性用document.body和document.documentElemen表達出來可能會截然不同,。

documentElement 和 body 相關(guān)說明：

body是DOM對象里的body子節(jié)點,，即 <body> 標簽；

documentElement 是整個節(jié)點樹的根節(jié)點root,，即<html> 標簽,；

DOM把層次中的每一個對象都稱之為節(jié)點，就是一個層次結(jié)構(gòu),，你可以理解為一個樹形結(jié)構(gòu),，就像我們的目錄一樣，一個根目錄,，根目錄下有子目錄,，子目錄下還有子目錄。

以HTML超文本標記語言為例：整個文檔的一個根就是,在DOM中可以使用document.documentElement來訪問它,，它就是整個節(jié)點樹的根節(jié)點,。而body是子節(jié)點，要訪問到body標簽,，在腳本中可以寫：document.body,。

除了documentElement，body在瀏覽器下表現(xiàn)方式的不同和各個瀏覽器對這三個屬性的解釋不同,，ie下的混雜模式和標準模式也來插了一腳,。

下面我們就來總結(jié)一下各個瀏覽器在這些個東西的作怪下對這三個屬性表達：

chrome：

document.body.clientHeight      
document.body.scrollHeight     ->   這三個都會返回文檔的大小
document.body.offsetHeight

document.documentElement.clientHeight    ->   視口的大小
document.documentElement.scrollHeight   ->   文檔的大小
document.documentElement.offsetHeight   ->   文檔的大小

火狐

console.log(document.documentElement.scrollHeight);   -> 文檔大小
console.log(document.documentElement.clientHeight);  ->  文檔大小    （三個值相同，包含滾動條）
console.log(document.documentElement.offsetHeight);  ->  文檔大小

console.log(document.body.clientHeight);      ->   視口大小
console.log(document.body.offsetHeight);      ->   文檔大?。ú缓琾adding border）比scrollHeght略小
console.log(document.body.scrollHeight);      ->   文檔大小 和 documentElement 三個取到的值一樣

在eage下模仿ie9（標準模式下）

document.body.clientHeight   -> 0
document.body.scrollHeight   ->  視口的大小
document.body.offsetHeight  ->  0

document.documentElement.clientHeight    ->   視口的大小
document.documentElement.scrollHeight   ->   文檔的大小
document.documentElement.offsetHeight   ->   文檔的大?。òㄟ吙颍?/pre>

edge模擬ie8的混雜模式document.compatMode === "BackCompat"

document.documentElement.offsetHeight   ->  文檔大小
document.documentElement.offsetHeight   ->  文檔大小
document.documentElement.clientHeight   ->   視口大小

document.body.clientHeight    ->  視口大小
document.body.offsetHeight    ->  文檔大小（包括padding 和 border）
document.body.scrollHeight    ->   文檔大小

想必已經(jīng)對這個屬性厭惡至極了,，各個因素的影響導致想要獲取視口大小和文檔大小變成一個頭疼的問題,，最后下面兩個函數(shù)解決了這個問題，兼容了不同的瀏覽器,。

/*視口的大小,，部分移動設備瀏覽器對innerWidth的兼容性不好，需要
 *document.documentElement.clientWidth或者document.body.clientWidth
 *來兼容（混雜模式下對document.documentElement.clientWidth不支持）,。
 *使用方法 ： getViewPort().width;
 */
function getViewPort () {
    if(document.compatMode == "BackCompat") {   //瀏覽器嗅探,，混雜模式
        return {
            width: document.body.clientWidth,
            height: document.body.clientHeight
        };
    } else {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        };
    }
}

//獲得文檔的大小（區(qū)別與視口）,與上面獲取視口大小的方法如出一轍
function getDocumentPort () {
    if(document.compatMode == "BackCompat") {
        return {
            width: document.body.scrollWidth,
            height: document.body.scrollHeight
        };
    } else {
        return {
            width: Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth),
            height: Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)
        }
    }
}

關(guān)于Width的和上面的沒有太大差異，參考上面的解釋,。