我的是（Chrome）clientWidth ：370、clientHeight：600、scrollWidth：370、scrollHeight：600、offsetWidth：370、offsetHeight：8？ 为什么会是 8？
慕婉清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是不同的，请自行测试。
-
- qq_啦啦啦啦_5
- 2018-07-06 09:56:56
我也是
-
- 轩辕sama
- 2018-06-15 13:11:20
倒数第二段把短路运算打成了或运算orz
-
- 那人那人
- 2018-06-14 15:58:43
我也是 8
JavaScript进阶篇
468061 学习 · 21891 问题
相似问题