                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進階篇

我的是（Chrome）clientWidth ：370、clientHeight：600、scrollWidth：370、scrollHeight：600、offsetWidth：370、offsetHeight：8？為什么會是 8？

我的是clientWidth ：370、clientHeight：600、scrollWidth：370、scrollHeight：600、offsetWidth：370、offsetHeight：8？?

為什么會是 8？

慕婉清0528570

2018-06-02

源自：JavaScript進階篇 9-20

關(guān)注問題我要回答

2132

操作

收起

4 回答

軒轅sama 回答被采納 +2 積分
2018-06-15

body相對于html有一個默認的margin 8px

documentElement.offsetHeight 在chrome中是html文檔大小，對應(yīng)html的高度，為8px（由于默認margin的存在）(由于body高度為0，margin-top與margin-bottom重合）

body.offsetHeight在chrome中是body文檔大小，對應(yīng)body的高度，由于無內(nèi)容，body為0px

offsetHeight = documentElement.offsetHeight ||?body.offsetHeight = 8 || 0 = 8 px

（注意，這里不是或運算，而是邏輯短路。這也就意味著如果documentElement.offsetHeight不為0，其結(jié)果就是documentElement.offsetHeight，否則為body.offsetHeight。）

這就是為什么offsetHeight會變成8px。經(jīng)過測試，如果在中間添加一個有height的div，documentElement.offsetHeight會比body.offsetHeight大16。（margin-top+margin-bottom）

而documentElement.clientHeight與documentElement.scrollHeight在chrome中都是視口大小。。。

body.clientHeight與body.scrollHeight都是body的文檔大小，為0px

寬度同理，但由于寬度默認是100%的，所以一開始就有16px的差值。由于或運算的存在，最后得到的都是documentElement.offsetHeight，也就是視口大小，在你這里就是370px，而body.offsetHeight應(yīng)該為370px-16px=354px。在這里 Width = 370 || 354 = 370.?

以上只針對chrome，其他內(nèi)核的瀏覽器如火狐，IE8是不同的，請自行測試。