解析offsetHeight,clientHeight,scrollHeight之間的區(qū)別
在網(wǎng)上搜了一下,結(jié)論非?;\統(tǒng),講IE從不講版本,因此自己做了測試并上傳結(jié)論。以下結(jié)論皆是在標準模式下測試通過的,沒有測試quirk模式。
clientHeight
大部分瀏覽器對 clientHeight 都沒有什么異議,都認為是內(nèi)容可視區(qū)域的高度,也就是說頁面瀏覽器中可以看到內(nèi)容的這個區(qū)域的高度,即然是指可看到內(nèi)容的區(qū)域,滾動條不算在內(nèi)。但要注意padding是算在內(nèi)。其計算方式為clientHeight = topPadding + bottomPadding+ height - scrollbar.height。
offsetHeight
在IE6,IE7,IE8以及最新的的FF, Chrome中,在元素上都是offsetHeight = clientHeight + 滾動條 + 邊框。
scrollHeight
scrollHeight是元素的padding加元素內(nèi)容的高度。這個高度與滾動條無關(guān),是內(nèi)容的實際高度。
計算方式 :scrollHeight = topPadding + bottomPadding + 內(nèi)容margix box的高度。
在瀏覽器中的區(qū)別在于:
IE6、IE7 認為scrollHeight 是網(wǎng)頁內(nèi)容實際高度,可以小于clientHeight。
FF、Chrome 認為scrollHeight 是網(wǎng)頁內(nèi)容高度,不過最小值是clientHeight。
注: 以上都是對于一般元素而方言的,body和documentElement的clientHeight, offsetHeight和scrollHeight在各個瀏覽器中的計算方式又不同。在所有的瀏覽器中,如果你想獲取整個視窗的高度,你得用documentElement.clientHeight,因為body.clientHeight是由它的內(nèi)容決定的。 關(guān)于body和documentElement的這些屬性,則完全是另外一回事:
FF19
在body上設置overflow:scroll就是設置瀏覽器的滾動條,導致body.clientHeight永遠都等于body.scrollHeight。
body
clientHeight:body.padding+ body.height(css設置或內(nèi)容撐的);
offsetHeight:clientHeight+ body.border;
scrollHeight== clientHeight。
documentElement
clientHeight= window視窗高度 -scrollbar.width。
offsetHeight= body.offsetHeight + body.margin。
scrollHeight= 內(nèi)容的高度(與body的height樣式無關(guān)),但最小值是documentElement.clientHeight。
元素上
offsetHeight= padding + border + height。
clientHeight= padding + height - scrollbar.width。
scrollHeight>= clientHeight
從結(jié)果分析,F(xiàn)F認為scrollHeight的最小高度是clientHeight。
offsetLeft = 元素border左上角到window視窗原點的距離 或 到offsetParent的borderbox頂部的距離。
Chrome
body
clientHeight= body.padding + body.height(css設置或內(nèi)容撐大);
offsetHeight = body.clientHeight + body.border;
scrollHeight= body.padding + 內(nèi)容的高度(與height樣式無關(guān)),但最小值是documentElement.clientHeight。
documentElement
clientHeight= window視窗高度 – 滾動條高度。
offsetHeight = body.offsetHeight + body.margin;
scrollHeight = 內(nèi)容的高度(與body上的height無關(guān)),但最小值是documentElement.offsetHeight。
元素上
offsetHeight = padding + border + height。
clientHeight = padding + height - scrollbar.width。
scrollHeight >= clientHeight
Safari 5
body
clientHeight= body.padding + body.height(CSS或內(nèi)容撐的);
offsetHeight= clientHeight + border;
scrollHeight= body.padding + 內(nèi)容的高度(與height樣式無關(guān)),但最小值是documentElement.clientHeight。
documentElement
clientHeight = window窗口大小 – 滾動條大小
offsetHeight = body.offsetHeight + body.margin
scrollHeight= 內(nèi)容的高度(與body上的height無關(guān)),但最小值是documentElement.offsetHeight。
IE8
在IE8下,滾動條的大小是17個像素。
body
clientHeight= body.padding + body.height(css設置或內(nèi)容撐大)
offsetHeight = clientHeight + body.border
scrollHeight =內(nèi)容的高度(與body上的height無關(guān)),但最小值是clientHeight。
documentElement
clientHeight = 窗口大?。ǔL動條后)
offsetHeight = clientHeight + 滾動條大小 + body.border
scrollHeight=內(nèi)容的高度(與body上的height無關(guān)),但最小值是body.offsetHeight+ margin。
元素上
offsetHeight = padding + border + height。
clientHeight = padding + height - scrollbar.width。
scrollHeight >= clientHeight
從結(jié)果分析,F(xiàn)F認為scrollHeight的最小高度是clientHeight。
offsetLeft = 元素border左上角到畫布原點的距離 或 到offsetParent的borderbox頂部的距離。
IE7
在IE7中,body上設置的滾動條并不是窗口的滾動條,這個需要注意。
body
clientHeight= body.padding + height(css設置或內(nèi)容撐大)– body上的滾動條。
offsetHeight= clientHeight + 滾動條的大小+body.border。
scrollHeight= 內(nèi)容的高度(與body上的height無關(guān))。
documentElement
clientHeight = window視窗大?。ㄅc滾動條的有無無關(guān))
offsetHeight = clientHeight。
scrollHeight = body.offsetHeight + border.margin
元素
offsetHeight = padding + border + height。
clientHeight = padding + height - scrollbar.width。
scrollHeight = padding + 內(nèi)容marginbox的高度
從結(jié)果分析,IE7認為scrollHeight可以小于clientHeight。
offsetLeft = 元素border box左上角到父容器(不是offsetParent)的borderbox左上角的距離。
IE6
在IE6中,與IE7類似, body上設置的滾動條并不是窗口的滾動條。
body
clientHeight = body.padding + body.height
offsetHeight = body.clientHeight + body.border + body上滾動條大小。
scrollHeight =內(nèi)容的高度(與body上的height無關(guān))。
documentElement
在IE6中,與IE7類似,雖然body上設置的滾動條并不是窗口的滾動條,但它的clientHeight和offsetHeight還算與其它瀏覽器想統(tǒng)一。
clientHeight = 窗口大?。ǔゴ翱跐L動條大小后)
offsetHeight =clientHeight + body.border
scrollHeight = body.offsetHeight + body.margin
元素
offsetHeight = padding + border + height。
clientHeight = padding + height - scrollbar.width。
scrollHeight = padding + 內(nèi)容margin box的高度
從結(jié)果分析,IE6認為scrollHeight可以小于clientHeight。
同理
clientWidth、offsetWidth 和scrollWidth 的解釋與上面相同,只是把高度換成寬度即可。
- top、clientTop、scrollTop、offsetTop
- HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全詳解
- scrollWidth,clientWidth與offsetWidth的區(qū)別
- javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全詳解
- js中top、clientTop、scrollTop、offsetTop的區(qū)別 文字詳細說明版
- javascript的offset、client、scroll使用方法詳解
- scrollWidth,clientWidth,offsetWidth的區(qū)別
- javascript中offset、client、scroll的屬性總結(jié)
相關(guān)文章
微信小程序?qū)崿F(xiàn)自動播放視頻模仿gif動圖效果實例
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)自動播放視頻模仿gif動圖效果的相關(guān)資料,通過本文介紹的方法可以實現(xiàn)自動播放視頻,視頻無控制條無聲音且自動循環(huán)播放,需要的朋友可以參考下2021-07-07JS/HTML5游戲常用算法之碰撞檢測 地圖格子算法實例詳解
這篇文章主要介紹了JS/HTML5游戲常用算法之碰撞檢測 地圖格子算法,結(jié)合實例形式詳細分析了javascript碰撞檢測算法的相關(guān)原理、實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下2018-12-12javascript+xml技術(shù)實現(xiàn)分頁瀏覽
基于web的技術(shù)中,分頁是一個老的不能再老的,但大家津津樂道的問題,隨著xml技術(shù)的日漸應用,把xml應用到分頁當中,也是一種可能,當然網(wǎng)上的教程很多,當我都是看得稀里糊涂,索性自己寫一個,與大家分享、指正。2008-07-07JavaScript獲取時區(qū)實現(xiàn)過程解析
這篇文章主要介紹了JavaScript獲取時區(qū)實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09Autocomplete Textbox Example javascript實現(xiàn)自動完成成功
Autocomplete Textbox Example javascript實現(xiàn)自動完成成功...2007-08-08JavaScript動態(tài)改變HTML頁面元素例如添加或刪除
HTML頁面元素可以通過js動態(tài)改變,比如可以向HTML中添加元素或刪除某個元素,下面為示例代碼,感興趣的朋友不要錯過2014-08-08