document.body.clientHeight与document.documentElement.clientHeight的区别

document.body.clientHeight与document.documentElement.clientHeight

1 document.body.clientHeight是指页面body元素的的高度，但是如果你的body是这样的：

<body>
    <div class="bg">
        <img src="./img/123.jpg">
    </div>
    <div class="btn">
        <img src="./img/pointer-normal.png">
    </div>
    <div>
        <label>touchstart:</label>
        <span class="start"></span>
    </div>
    <div>
        <label>touchend:</label>
        <span class="end"></span>
    </div>
    <div>
        <label>click:</label>
        <span class="click"></span>
    </div>
</body>

那么你打印出来的高度document.body.clientHeight的数值可能和你相像的有一点区别（偏小），主要区别就在于body顶部的img元素，因为img的图片加载需要时间，打印的时候图片并没加载完成，所以偏小的那一部分刚好是图片的高度。（div.btn设置了高度，然而div.bg没有设置高度）

2 document.documentElement.clientHeight是页面可见区域的高度（屏幕可见html文档的高度），而不是html元素的高度。document.documentElement.offsetHeight（整个html文档的高度）等与document.body.clientHeight的数值。

 

posted on 2016-06-25 15:21  luonb  阅读(934)  评论(0)  编辑  收藏  举报

导航