關於clientHeight、offsetHeight、scrollHeight

window.screen.availWidth     返回當前屏幕寬度(空白空間)   
window.screen.availHeight     返回當前屏幕高度(空白空間)   
window.screen.width     返回當前屏幕寬度(分辨率值)   
window.screen.height    返回當前屏幕高度(分辨率值)   
window.document.body.offsetHeight;     返回當前網頁高度   
window.document.body.offsetWidth;     返回當前網頁寬度   

 

四種瀏覽器[IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)]對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋。

clientHeight
    clientHeight 都認爲是內容可視區域的高度,也就是說頁面瀏覽器中可以看到內容的這個區域的高度,一般是最後一個工具條以下到狀態欄以上的這個區域,與頁面內容無關。

offsetHeight
    IE、Opera 認爲 offsetHeight = clientHeight + 滾動條 + 邊框
    NS、FF 認爲 offsetHeight 是網頁內容實際高度,可以小於 clientHeight。

scrollHeight
    IE、Opera 認爲 scrollHeight 是網頁內容實際高度,可以小於 clientHeight。
    NS、FF 認爲 scrollHeight 是網頁內容高度,不過最小值是 clientHeight。

簡單地說
    clientHeight 就是透過瀏覽器看內容的這個區域高度。
    NS、FF 認爲 offsetHeight 和 scrollHeight 都是網頁內容高度,只不過當網頁內容高度小於等於 clientHeight 時,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小於 clientHeight。
    IE、Opera 認爲 offsetHeight 是可視區域 clientHeight 滾動條加邊框。scrollHeight 則是網頁內容實際高度。

同理
    clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同,只是把高度換成寬度即可。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章