我們這里說(shuō)說(shuō)四種瀏覽器對(duì) document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋,這里說(shuō)的是 document.body,如果是 HTML 控件,則又有不同,點(diǎn)擊這里查看。
這四種瀏覽器分別為IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。
文尾的重要說(shuō)明比較重要,請(qǐng)注意。
clientHeight
大家對(duì) clientHeight 都沒(méi)有什么異議,都認(rèn)為是內(nèi)容可視區(qū)域的高度,也就是說(shuō)頁(yè)面瀏覽器中可以看到內(nèi)容的這個(gè)區(qū)域的高度,一般是最后一個(gè)工具條以下到狀態(tài)欄以上的這個(gè)區(qū)域,與頁(yè)面內(nèi)容無(wú)關(guān)。
offsetHeight
IE、Opera 認(rèn)為 offsetHeight = clientHeight + 滾動(dòng)條 + 邊框。
NS、FF 認(rèn)為 offsetHeight 是網(wǎng)頁(yè)內(nèi)容實(shí)際高度,可以小于 clientHeight。
scrollHeight
IE、Opera 認(rèn)為 scrollHeight 是網(wǎng)頁(yè)內(nèi)容實(shí)際高度,可以小于 clientHeight。
NS、FF 認(rèn)為 scrollHeight 是網(wǎng)頁(yè)內(nèi)容高度,不過(guò)最小值是 clientHeight。
簡(jiǎn)單地說(shuō)
clientHeight 就是透過(guò)瀏覽器看內(nèi)容的這個(gè)區(qū)域高度。
NS、FF 認(rèn)為
offsetHeight 和 scrollHeight 都是網(wǎng)頁(yè)內(nèi)容高度,只不過(guò)當(dāng)網(wǎng)頁(yè)內(nèi)容高度小于等于 clientHeight
時(shí),scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
IE、Opera 認(rèn)為 offsetHeight 是可視區(qū)域 clientHeight 滾動(dòng)條加邊框。scrollHeight 則是網(wǎng)頁(yè)內(nèi)容實(shí)際高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同,只是把高度換成寬度即可。
重要說(shuō)明
以上是在沒(méi)有指定 DOCTYPE 的情況下,如果指定了 DOCTYPE,比如:DTD XHTML 1.0 Transitional,則意義又會(huì)不同,在這種情況下這三個(gè)值都是同一個(gè)值,都表示內(nèi)容的實(shí)際高度。新版本的瀏覽器大多支持根據(jù)頁(yè)面指定的 DOCTYPE 來(lái)啟用不同的解釋器。下載或?yàn)g覽測(cè)試文件。 如果要在指定的 DOCTYPE 下按上述意義來(lái)應(yīng)用,怎么辦呢?答案是:將 document.body 和 document.documentElement 一起應(yīng)用,比如:document.documentElement.scrollLeft || document.body.scrollLeft(一般將 document.documentElement 寫在前面),類似應(yīng)用請(qǐng)參見(jiàn):http://www.cftea.com/c/2008/06/U1FSRIC247DWTK2M.asp。