我的是（Chrome）clientWidth ：370、clientHeight：600、scrollWidth：370、scrollHeight：600、offsetWidth：370、offsetHeight：8？为什么会是 8？-慕课网

首页课程实战体系课手记专栏慕课教程

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

来源：9-20 网页尺寸offsetHeight

慕婉清0528570

2018-06-02 16:52

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

为什么会是 8？

写回答关注

4回答

轩辕sama

2018-06-15 13:01:27

已采纳

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是不同的，请自行测试。

3 12

慕婉清052...

非常感谢！

2018-07-12 16:09:49

共 3 条回复 >
qq_啦啦啦啦_5

2018-07-06 09:56:56

我也是

0 0
轩辕sama

2018-06-15 13:11:20

倒数第二段把短路运算打成了或运算orz

0 0
那人那人

2018-06-14 15:58:43

我也是 8

0 0