clientHeight , scrollHeight , offsetHeight相信每個(gè)人都用過(guò)，可是每次用都要查一下到底哪個(gè)是文檔大小哪個(gè)是視口大小，還有頭疼的兼容問(wèn)題。
先來(lái)官方的了解一下這三個(gè)屬性：
看起來(lái)解釋很清晰，可是用起來(lái)好像沒(méi)有這么容易啊，當然，各個(gè)瀏覽器的表達方式不同確實(shí)要背鍋，不過(guò)，當用這些個(gè)屬性的時(shí)候免不了要面對這兩個(gè)東西的差異，document.body和document.documentElement，同樣的屬性用document.body和document.documentElemen表達出來(lái)可能會(huì )截然不同。
documentElement 和 body 相關(guān)說(shuō)明：
body是DOM對象里的body子節點(diǎn)，即 <body> 標簽；
documentElement 是整個(gè)節點(diǎn)樹(shù)的根節點(diǎn)root，即<html> 標簽；
DOM把層次中的每一個(gè)對象都稱(chēng)之為節點(diǎn)，就是一個(gè)層次結構，你可以理解為一個(gè)樹(shù)形結構，就像我們的目錄一樣，一個(gè)根目錄，根目錄下有子目錄，子目錄下還有子目錄。
以HTML超文本標記語(yǔ)言為例：整個(gè)文檔的一個(gè)根就是,在DOM中可以使用document.documentElement來(lái)訪(fǎng)問(wèn)它，它就是整個(gè)節點(diǎn)樹(shù)的根節點(diǎn)。而body是子節點(diǎn)，要訪(fǎng)問(wèn)到body標簽，在腳本中可以寫(xiě)：document.body。
除了documentElement，body在瀏覽器下表現方式的不同和各個(gè)瀏覽器對這三個(gè)屬性的解釋不同，ie下的混雜模式和標準模式也來(lái)插了一腳。
下面我們就來(lái)總結一下各個(gè)瀏覽器在這些個(gè)東西的作怪下對這三個(gè)屬性表達：
document.body.clientHeight document.body.scrollHeight -> 這三個(gè)都會(huì )返回文檔的大小document.body.offsetHeight
document.documentElement.clientHeight -> 視口的大小document.documentElement.scrollHeight -> 文檔的大小document.documentElement.offsetHeight -> 文檔的大小
火狐
console.log(document.documentElement.scrollHeight); -> 文檔大小console.log(document.documentElement.clientHeight); -> 文檔大小 （三個(gè)值相同，包含滾動(dòng)條）console.log(document.documentElement.offsetHeight); -> 文檔大小console.log(document.body.clientHeight); -> 視口大小console.log(document.body.offsetHeight); -> 文檔大?。ú缓琾adding border）比scrollHeght略小console.log(document.body.scrollHeight); -> 文檔大小 和 documentElement 三個(gè)取到的值一樣
在eage下模仿ie9（標準模式下）
document.body.clientHeight -> 0document.body.scrollHeight -> 視口的大小document.body.offsetHeight -> 0
document.documentElement.clientHeight -> 視口的大小document.documentElement.scrollHeight -> 文檔的大小document.documentElement.offsetHeight -> 文檔的大?。òㄟ吙颍?/pre>
document.documentElement.offsetHeight -> 文檔大小document.documentElement.offsetHeight -> 文檔大小document.documentElement.clientHeight -> 視口大小
document.body.clientHeight -> 視口大小document.body.offsetHeight -> 文檔大?。ò╬adding 和 border）document.body.scrollHeight -> 文檔大小
想必已經(jīng)對這個(gè)屬性厭惡至極了，各個(gè)因素的影響導致想要獲取視口大小和文檔大小變成一個(gè)頭疼的問(wèn)題，最后下面兩個(gè)函數解決了這個(gè)問(wèn)題，兼容了不同的瀏覽器。
/*視口的大小，部分移動(dòng)設備瀏覽器對innerWidth的兼容性不好，需要 *document.documentElement.clientWidth或者document.body.clientWidth *來(lái)兼容（混雜模式下對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) } }}
關(guān)于Width的和上面的沒(méi)有太大差異，參考上面的解釋。
聯(lián)系客服
