关于document.body和document.documentElement

最新推荐文章于 2020-08-26 20:54:22 发布

diantiaozhu8383

最新推荐文章于 2020-08-26 20:54:22 发布

阅读量88

点赞数

原文链接：http://www.cnblogs.com/junxi/p/5228494.html

版权

刚刚帮朋友写一个样式加载数据的时候，用到了这样的一个语句，document.documentElement.clientHeight，

<body>
<h1>x</h1>
   <div class="box">
     <ul>
       <li><img src="1.jpg" alt="111111"></li>
       <li><img src="2.jpg" alt="111111"></li>
       <li><img src="3.jpg" alt="111111"></li>
       <li><img src="4.jpg" alt="111111"></li>
       <li><img src="5.jpg" alt="111111"></li>
       <li><img src="6.jpg" alt="111111"></li>
       <li><img src="7.jpg" alt="111111"></li>
       <li><img src="8.jpg" alt="111111"></li>
       <li><img src="9.jpg" alt="111111"></li>
       <li><img src="10.jpg" alt="111111"></li>
       <li><img src="11.jpg" alt="111111"></li>
       <li><img src="12.jpg" alt="111111"></li>
       <li><img src="13.jpg" alt="111111"></li>
       <li><img src="14.jpg" alt="111111"></li>
       <li><img src="15.jpg" alt="111111"></li>
<li><img src="1.jpg" alt="111111"></li>
       <li><img src="2.jpg" alt="111111"></li>
       <li><img src="3.jpg" alt="111111"></li>
       <li><img src="4.jpg" alt="111111"></li>
       <li><img src="5.jpg" alt="111111"></li>
       <li><img src="6.jpg" alt="111111"></li>
       <li><img src="7.jpg" alt="111111"></li>
       <li><img src="8.jpg" alt="111111"></li>
       <li><img src="9.jpg" alt="111111"></li>
       <li><img src="10.jpg" alt="111111"></li>
       <li><img src="11.jpg" alt="111111"></li>
       <li><img src="12.jpg" alt="111111"></li>
       <li><img src="13.jpg" alt="111111"></li>
       <li><img src="14.jpg" alt="111111"></li>
       <li><img src="15.jpg" alt="111111"></li>
     </ul>
      <div id="jz">点击加载更多</div>
   </div>

结构就是上面。box没有设置样式高度。这个时候我要取可视区的高度就用:document.documentElement.clientHeight 可以了

但是因为我要给最下面的加载定位，必须要有高度，我就动态设置了box的高度。然后我就发现一个很不容易发现的问题，效果和我原来的算法不一样，浏览器并没有报错。

我一直在找原因，经过1个小时的BUG排查，打印出console.log(document.documentElement.clientHeight),惊人的发现，这并不是可视区域的高度，是整个网页的高度。

网上查找一些资料，很多人说是因为DTD也就是W3C声明的原因。具体我也没在意。我换成了console.log(document.body.clientHeight) 这个时候可视区域的高度就出来了。

现在这个规律是，当你在body体里面设置了界定的高度，并且这个高度大于你可视区域的高度（也就是有滚动条了），这个时候你取可视区域的高度要用document.body.clientHeight

当body里面的内容也产生了滚动条，但是你没有在样式中设置，这个时候你去可视区域的高度用document.documentElement.clientHeight。

documentElement是文档的根节点。body只是个节点。

转载于:https://www.cnblogs.com/junxi/p/5228494.html

diantiaozhu8383

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于document.body和document.documentElement

刚刚帮朋友写一个样式加载数据的时候，用到了这样的一个语句，document.documentElement.clientHeight，<body><h1>x</h1> <div class="box"> <ul> <li><img src="1.jpg" alt=...
复制链接

扫一扫