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

和世界不一样，那就不一样！

于 2024-03-25 14:10:34 发布

阅读量169

点赞数 2

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_44834981/article/details/137012565

版权

网页可见区域高：document.body.clientHeight
网页正文全文高：document.body.scrollHeight
clientHeight：表示可视区域高度，包括padding但不包括border、水平滚动条、margin的元素的高度

offsetHeight：表示可视区域高度，包括padding、border、水平滚动条，但不包括margin的元素的高度

scrollHeight: 当元素的子元素高度大于父元素，父元素出现滚动条，此时父元素的clientHeight表示可视的高度，父元素的scrollHeight 表示页面的高度，包括溢出页面被挡住的部分，即其实就是子元素的高度。在没有滚动条时scrollHeight 与clientHeight相等恒成立。单位px，只读元素。

document.documentElement表示文档的根元素，即html元素

document.body 表示文档中body元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html {
      height: 100%;
    }
    body {
      height: 100%;
    }
   .wrap {
      height: 100%;
      width: 90%;
      background-color: #9a6e3a;
      overflow: auto;
    }
     
    .box {
      height: 2000px;
      width: 50%;
      background-color: red;
    }
  </style>
</head>
<body>
<div class="wrap">
  <div class="box"></div>
</div>
</body>
<script>
  window.onload = function () {
    let $box = document.querySelector('.box')
    let $wrap = document.querySelector('.wrap')

    console.log(document.documentElement.clientHeight)  //屏幕可视区域高度  458
    console.log(document.body.clientHeight)  //屏幕可视区域高度  458

    console.log($wrap.clientHeight)  //屏幕可视区域高度  458

      //子元素高于父元素，内部有滚动条，此时高度包含子元素溢出的部分，即等于子元素高度
    console.log($wrap.scrollHeight)  

    console.log($box.clientHeight)  //子元素内部没有滚动条 等于子元素实际高度
    console.log($box.offsetHeight)  //子元素内部没有滚动条 等于子元素实际高度
  }
</script>
</html>

和世界不一样，那就不一样！

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
document.documentElement.clientHeight与document.body.clientHeight的区别

scrollHeight: 当元素的子元素高度大于父元素，父元素出现滚动条，此时父元素的clientHeight表示可视的高度，父元素的scrollHeight 表示页面的高度，包括溢出页面被挡住的部分，即其实就是子元素的高度。单位px，只读元素。clientHeight：表示可视区域高度，包括padding但不包括border、水平滚动条、margin的元素的高度。offsetHeight：表示可视区域高度，包括padding、border、水平滚动条，但不包括margin的元素的高度。
复制链接

扫一扫