offsetHeight是包含contentHeight+padding+borderHeight+ScrollBarHeight的
clientHeight僅包含contentHeight+padding,不含borderHeight+ScrollBarHeight的
換句話就是外內問題。
打個比喻你買手機,賣家是給你配個盒子的,你用的時候不用盒子,但你要把存起來,最后還是放到盒子里,所占用的空間不僅包含手機,更要看盒子的寬度,至於margin那是盒子與盒子之間的距離。
再打個比喻,你書架上放了很多書,大多數書都是直接放書架上,但一些書用硬殼包裝起來的。
scrollHeight包含了在有(或無)滾動條的情況下的不可見溢出部分,還包含::before,::after這樣的偽元素。
如果是clientHeight是內,scrollHeight就是內部的深度,廣度,折疊的長度。
打個比喻,你做電梯,你看見的是一層樓的高度,但是他可能是十幾二十幾層樓的高度。
再打個比喻,你從書架上拿了一本書放在書桌上閱讀,你看到的只有一本書32K的大小,但他有很多頁,如果200頁,那他的長度就是32K * 200 。
當然很多時候offsetHeight,clientHeight,scrollHeight的值完全一模一樣。
contentHeight為內容高度,怎么確定?有時候由內容高度自然確定,有時候也由樣式強制指定。
document.documentElement的值,首先document.documentElement = html,body的上級。他就是打開瀏覽器除去瀏覽器的標題欄地址欄書簽欄等高度的呈現出的內容。
他的clientHeight是一個固定的,就是剛才我們說的,但是offsetHeight,scrollHeight是變化的,他極可能小於clientHeight,也可以大於,當然也能等於。
或許他的clientHeight才有意義,就是剛才我們說的,可是offsetHeight,scrollHeight主要依托他的子元素body來確定吧(廢話,html下就只有body了,除了由他還能由誰,誰不是由子元素確定?)我意思是指offsetHeight按說應該跟隨的clientHeight的,但是顯然html的offsetHeight脫離了clientHeight,二十直接跟body聯系的。