国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 語言 > JavaScript > 正文

解析offsetHeight,clientHeight,scrollHeight之間的區(qū)別

2024-05-06 15:55:40
字體:
供稿:網(wǎng)友
這篇文章主要是對offsetHeight,clientHeight,scrollHeight之間的區(qū)別進行了詳細(xì)介紹,需要的朋友可以過來參考下,希望對大家有所幫助

在網(wǎng)上搜了一下,結(jié)論非常籠統(tǒng),講IE從不講版本,因此自己做了測試并上傳結(jié)論。以下結(jié)論皆是在標(biāo)準(zhǔn)模式下測試通過的,沒有測試quirk模式。

clientHeight

大部分瀏覽器對 clientHeight 都沒有什么異議,都認(rèn)為是內(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 認(rèn)為scrollHeight 是網(wǎng)頁內(nèi)容實際高度,可以小于clientHeight。

FF、Chrome 認(rèn)為scrollHeight 是網(wǎng)頁內(nèi)容高度,不過最小值是clientHeight。

注: 以上都是對于一般元素而方言的,body和documentElement的clientHeight, offsetHeight和scrollHeight在各個瀏覽器中的計算方式又不同。在所有的瀏覽器中,如果你想獲取整個視窗的高度,你得用documentElement.clientHeight,因為body.clientHeight是由它的內(nèi)容決定的。 關(guān)于body和documentElement的這些屬性,則完全是另外一回事:


FF19

在body上設(shè)置overflow:scroll就是設(shè)置瀏覽器的滾動條,導(dǎo)致body.clientHeight永遠(yuǎn)都等于body.scrollHeight。

body
clientHeight:body.padding+ body.height(css設(shè)置或內(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認(rèn)為scrollHeight的最小高度是clientHeight。

offsetLeft = 元素border左上角到window視窗原點的距離 或 到offsetParent的borderbox頂部的距離。

Chrome
body
clientHeight= body.padding + body.height(css設(shè)置或內(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設(shè)置或內(nèi)容撐大)

offsetHeight = clientHeight + body.border

scrollHeight =內(nèi)容的高度(與body上的height無關(guān)),但最小值是clientHeight。

documentElement
clientHeight = 窗口大小(除去滾動條后)

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認(rèn)為scrollHeight的最小高度是clientHeight。

offsetLeft = 元素border左上角到畫布原點的距離 或 到offsetParent的borderbox頂部的距離。

IE7
在IE7中,body上設(shè)置的滾動條并不是窗口的滾動條,這個需要注意。

body
clientHeight= body.padding + height(css設(shè)置或內(nèi)容撐大)– body上的滾動條。

offsetHeight= clientHeight + 滾動條的大小+body.border。

scrollHeight=   內(nèi)容的高度(與body上的height無關(guān))。

documentElement
clientHeight = window視窗大小(與滾動條的有無無關(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認(rèn)為scrollHeight可以小于clientHeight。

offsetLeft = 元素border box左上角到父容器(不是offsetParent)的borderbox左上角的距離。

IE6
在IE6中,與IE7類似, body上設(shè)置的滾動條并不是窗口的滾動條。

body
clientHeight = body.padding + body.height

offsetHeight = body.clientHeight + body.border + body上滾動條大小。

scrollHeight =內(nèi)容的高度(與body上的height無關(guān))。

documentElement
在IE6中,與IE7類似,雖然body上設(shè)置的滾動條并不是窗口的滾動條,但它的clientHeight和offsetHeight還算與其它瀏覽器想統(tǒng)一。

clientHeight = 窗口大小(除去窗口滾動條大小后)

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認(rèn)為scrollHeight可以小于clientHeight。

同理

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

發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表

圖片精選

主站蜘蛛池模板: 武夷山市| 左云县| 永善县| 锦州市| 淅川县| 拜城县| 大庆市| 博爱县| 湘潭市| 方山县| 万盛区| 双江| 泊头市| 闻喜县| 天峨县| 天水市| 五原县| 武威市| 呼伦贝尔市| 梅州市| 鲁山县| 依兰县| 泾川县| 石柱| 南宁市| 佛冈县| 莲花县| 双鸭山市| 南昌县| 舞钢市| 安义县| 白城市| 昆山市| 兴隆县| 芮城县| 庐江县| 云南省| 调兵山市| 吴堡县| 天津市| 扬州市|