clientHeight、offsetHeight 和 scrollHeight

作者:chilleen 來源:千一網絡(原創) 日期:2006-4-26

兼容性,特別是這幾個東西的兼容性是很復雜的,為了簡單,建議閱讀再談 document.documentElement 與 document.body 的 scrollWidth、offsetWidth、clientWidth 這篇文章。

我們這里說說四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋,這里說的是 document.body,如果是 HTML 控件,則又有不同,點擊這里查看。

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

文尾的重要說明比較重要,請注意。

看了評論,不少朋友,對我的描述還是很疑惑,所以我做了下面這個圖,來幫助理解。

clientHeight、offsetHeight 和 scrollHeight

從圖中,我們可以看到一個瀏覽器窗口,窗口被我故意拖小了,這樣形成了滾動條,所以網頁上端的內容就隱藏在了窗口上面,網頁下端的內容就隱藏在了窗口下面。

clientHeight、offsetHeight 和 scrollHeight 大致可以這樣解釋(詳細內容請仔細閱讀后面的內容):

  • clientHeight 圖中那塊白的的高度。
  • offsetHeight、scrollHeight 圖中白的+上陰影部分+下陰影部分,也就是網頁內容高度。
  • 順便提一下,那個上陰影部分(最上面一塊漸變黑色),就是 scrollTop。

clientHeight

大家對 clientHeight 都沒有什么異議,都認為是內容可視區域的高度,也就是說頁面瀏覽器中可以看到內容的這個區域的高度,一般是最后一個工具條以下到狀態欄以上的這個區域,與頁面內容無關。

offsetHeight

  • IE、Opera 認為 offsetHeight = clientHeight + 滾動條 + 邊框。
  • NS、FF 認為 offsetHeight 是網頁內容實際高度,可以小于 clientHeight。也就是說網頁內容實際高度小于 clientHeight 時,offsetHeight 返回網頁內容實際高度。

scrollHeight

  • IE、Opera 認為 scrollHeight 是網頁內容實際高度,可以小于 clientHeight。
  • NS、FF 認為 scrollHeight 是網頁內容高度,不過最小值是 clientHeight。也就是說網頁內容實際高度小于 clientHeight 時,scrollHeight 返回 clientHeight 。

測試一下

測試文件

簡單地說

clientHeight 就是透過瀏覽器看內容的這個區域高度。

NS、FF 認為 offsetHeight 和 scrollHeight 都是網頁內容高度,只不過當網頁內容高度小于等于 clientHeight 時,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。

IE、Opera 認為 offsetHeight 是可視區域 clientHeight 滾動條加邊框。scrollHeight 則是網頁內容實際高度。

同理

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

重要說明

以上是在沒有指定 DOCTYPE 的情況下,如果指定了 DOCTYPE 為 XHTML,比如:DTD XHTML 1.0 Transitional,則意義又會不同,在這種情況下這三個值都是同一個值,都表示內容的實際高度(并不在乎窗口有多高)。

再說明一下,寫這篇文章時,Chrome 瀏覽器還沒有出來,后來我測試了一下 Chrome 在 指定了 DOCTYPE 為 XHTML 時的情況,真 BT,它的 clientHeight 和 offsetHeight 值相同,都表示內容的實際高度(并不在乎窗口有多高),scrollHeight 又是另外一套不知道什么玩意兒,總之這點它和 IE、Firefox 不同就是了。 

好,回過來,如果要在指定的 DOCTYPE 為 XHTML 的情況下,要按文章開頭的解釋(即 clientHeight、offsetHeight、scrollHeight 意義不同)來應用,怎么辦呢?答案是:將 document.body 和 document.documentElement 一起應用,比如:document.documentElement.scrollLeft || document.body.scrollLeft(一般將 document.documentElement 寫在前面),類似應用請參見:http://www.vcdosf.tw/c/2008/06/U1FSRIC247DWTK2M.asp

相關閱讀

你前面那位網友看了:HTTP 錯誤 404.17:請求的內容似乎是腳本,因而將無法由靜態文件處理程序來處理。

▲▲▲嘿,歡迎轉載傳播本站原創文章,盡量保留來源噢。▲▲▲

文章評論
  • 1 樓:評論
    還是不懂.....
  • 2 樓:難以理解
    很難理解
  • 3 樓:評論
    明白
  • 4 樓:評論
    不明白
  • 5 樓:評論
  • 6 樓:評論
    不明白,不懂
  • 7 樓:評論
  • 8 樓:評論
  • 9 樓:評論
  • 10 樓:評論
    沒內容 怎么就可以發表評論啊
  • 11 樓:評論
  • 12 樓:ceshi
    明白了
  • 13 樓:評論
    ;;
  • 14 樓:評論
    <a>還在琢磨</a>
  • 15 樓:評論
    http://www.還在琢磨.com
  • 16 樓:評論
     
  • 17 樓:評論
    <a>什么東西啊?</a>
  • 18 樓:評論
    有點暈 。。 。。
  • 19 樓:沒點開一個都是他們說相同的,真正知道問題的人都死光了?蹦出來些垃圾
  • 20 樓:評論
  • 21 樓:評論
    看不懂 有沒圖文并貌的
  • 22 樓:評論
    鄙視瀏覽器開發商,凈求多事麻煩
  • 23 樓:評論
    寫的不太對,就是加上dtd以后你寫的就不對了。
  • 24 樓:評論
    點開一個都是他們說相同的,真正知道問題的人都死光了?蹦出來些垃圾
  • 25 樓:評論
    <script>alert('每點開一個都是他們說相同的,真正知道問題的人都死光了?蹦出來些垃圾')</script>
  • 26 樓:評論
    <>
  • 27 樓:評論
    正在搞這些東西,學了有一倆個月了,感覺還是不行,快急瘋掉了
  • 28 樓:評論
    教育技術當前最熱門的
  • 29 樓:評論
    <textarea>jfd
    </textarea>
  • 30 樓:評論
  • 31 樓:評論
    baidu
  • 32 樓:評論
    clientHeight、offsetHeight 和 scrollHeight 大致可以這樣解釋(詳細內容請仔細閱讀后面的內容):

    &#8226;clientHeight 圖中那塊白的的高度。
    &#8226;offsetHeight、scrollHeight 圖中白的+上陰影部分+下陰影部分,也就是網頁內容高度。
    &#8226;順便提一下,那個上陰影部分,就是 scrollTop。
    ----------------------------------------------------
    這里好像寫的不太清晰。。。。修改一下:
    clientHeight、offsetHeight 和 scrollHeight 大致可以這樣解釋(詳細內容請仔細閱讀后面的內容):

    &#8226;clientHeight 圖中那塊白的的高度。
    &#8226;offsetHeight 圖中那塊白的高度+邊框高度
    &#8226;scrollHeight 圖中白的+上陰影部分+下陰影部分,也就是網頁內容高度。
    &#8226;順便提一下,那個上陰影部分,就是 scrollTop。
  • 33 樓:評論
  • 34 樓:評論
    陰影部分 你指的是哪一塊? 白色以外的地方嗎? 弄暈了~
  • 35 樓:評論
    最上面一塊漸變黑色
  • 36 樓:評論
    <em>shit.......</em>
  • 37 樓:<em>shit</em>
    ..
  • 38 樓:評論
    NS、FF 認為 offsetHeight 和 scrollHeight 都是網頁內容高度,只不過當網頁內容高度小于等于 clientHeight 時,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。

    在ff5.0.1下,經過測試,offsetHeight 仍然為clientHeight+滾動條高度+邊框高度!
  • 39 樓:評論
  • 40 樓:內容 可以為空。。。
  • 41 樓:評論
  • 42 樓:評論
    <script type="text/javascript">alert("哈哈")</script>
  • 43 樓:評論
    <script type="text/javascript">alert("哈哈")</script>
  • 44 樓:評論
    傻了
  • 45 樓:內容可以為空,真不錯啊
  • 46 樓:評論
    有簡單易懂的嘛??
  • 47 樓:評論
    clientheight是什么
  • 48 樓:評論
    問的只是<div> 的作用!!
標題:必填
內容:
最新22选5开奖公告