javascript知識點收藏

2024-09-06 12:43:19

字體：大中小

來源：轉載

供稿：網友

1.四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋。

這四種瀏覽器分別為IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

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 的解釋與上面相同，只是把高度換成寬度即可。

但是
FF 在不同的 DOCTYPE 中對 clientHeight 的解釋不同， xhtml 1 trasitional 中則不是如上解釋的。其它瀏覽器則不存在此問題。

2.JS取clientHeight與scrollTop
先來段數據，下表的值為document.body.clientHeight / document.documentElement.clientHeight

             IE               FF
Html       608/0          630/11096
Xhtml     10942/591    11076/630

在html/xhtml與ie/ff這4種排列組合下，取得的clientHeight幾乎沒有一樣的，可見寫一段兼容3種瀏覽器兩種頁面標準的js腳本有多頭疼。

暫時總結的判斷方法如下：
var h1 = document.body.clientHeight;
var h2 = document.documentElement.clientHeight;
var isXhtml = (h2<=h1&&h2!=0)?true:false; //判斷當前頁面的Doctype是否為Xhtml
var body = isXhtml?document.documentElement:document.body;
alert(body.clientHeight); //最終結果比較一致

安全的取到scrollTop：

上一篇：極酷的javascirpt，讓你隨意編輯任何網頁

下一篇：javascript編程起步（第四課）