问答详情
源自：9-20 网页尺寸offsetHeight

我的是（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 16:52

个回答

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

    12
  • qq_啦啦啦啦_5
    2018-07-06 09:56:56

    我也是

    0
  • 轩辕sama
    2018-06-15 13:11:20

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

    0
  • 那人那人
    2018-06-14 15:58:43

    我也是 8

    0