                        课程
                    
                        /前端开发
                        
                            /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

关注问题我要回答

2081

操作

收起

5 回答

轩辕sama 回答被采纳 +2 积分
2018-06-15

body相对于html有一个默认的margin 8px

documentElement.offsetHeight 在chrome中是html文档大小，对应html的高度，为8px（由于默认margin的存在）(由于body高度为0，margin-top与margin-bottom重合）

body.offsetHeight在chrome中是body文档大小，对应body的高度，由于无内容，body为0px

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

（注意，这里不是或运算，而是逻辑短路。这也就意味着如果documentElement.offsetHeight不为0，其结果就是documentElement.offsetHeight，否则为body.offsetHeight。）

这就是为什么offsetHeight会变成8px。经过测试，如果在中间添加一个有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应该为370px-16px=354px。在这里 Width = 370 || 354 = 370.

以上只针对chrome，其他内核的浏览器如火狐，IE8是不同的，请自行测试。