clientHeight , scrollHeight , offsetHeight相信每個人都用過，可是每次用都要查一下到底哪個是文檔大小哪個是視口大小，還有頭疼的兼容問題。
先來官方的了解一下這三個屬性：
- clientHeight：元素客戶區的大小，指的是元素內容及其邊框所占據的空間大小（經過實踐取出來的大多是視口大小）
- scrollHeight: 滾動大小，指的是包含滾動內容的元素大小（元素內容的總高度）
- offsetHeight: 偏移量，包含元素在屏幕上所用的所有可見空間（包括所有的內邊距滾動條和邊框大小，不包括外邊距
看起來解釋很清晰，可是用起來好像沒有這么容易啊，當然，各個瀏覽器的表達方式不同確實要背鍋，不過，當用這些個屬性的時候免不了要面對這兩個東西的差異，document.body和document.documentElement，同樣的屬性用document.body和document.documentElemen表達出來可能會截然不同。
documentElement 和 body 相關說明：
body是DOM對象里的body子節點，即 <body> 標簽；
documentElement 是整個節點樹的根節點root，即<html> 標簽；
DOM把層次中的每一個對象都稱之為節點，就是一個層次結構，你可以理解為一個樹形結構，就像我們的目錄一樣，一個根目錄，根目錄下有子目錄，子目錄下還有子目錄。
以HTML超文本標記語言為例：整個文檔的一個根就是,在DOM中可以使用document.documentElement來訪問它，它就是整個節點樹的根節點。而body是子節點，要訪問到body標簽，在腳本中可以寫：document.body。
除了documentElement，body在瀏覽器下表現方式的不同和各個瀏覽器對這三個屬性的解釋不同，ie下的混雜模式和標准模式也來插了一腳。
下面我們就來總結一下各個瀏覽器在這些個東西的作怪下對這三個屬性表達：
- 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); -> 文檔大小（不含padding 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 -> 文檔的大小（包括邊框）
- 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 -> 文檔大小
想必已經對這個屬性厭惡至極了，各個因素的影響導致想要獲取視口大小和文檔大小變成一個頭疼的問題，最后下面兩個函數解決了這個問題，兼容了不同的瀏覽器。
/*視口的大小，部分移動設備瀏覽器對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 }; } }
//獲得文檔的大小（區別與視口）,與上面獲取視口大小的方法如出一轍 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) } } }
關於Width的和上面的沒有太大差異，參考上面的解釋。