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

最新推荐文章于 2022-03-21 17:34:21 发布

兮木兮木

最新推荐文章于 2022-03-21 17:34:21 发布

阅读量2.5k

点赞数 2

分类专栏： html css 文章标签： html css html5

本文链接：https://blog.csdn.net/mochenangel/article/details/105389057

版权

html 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

网页可见区域高：`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元素

正文
- 在一个空白html页面中如下面代码片段
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
   <style>
       * {
           margin: 0;
           padding: 0;
       	  }
    </style>
</head>
<body>

</body>
</html>
```
  - 此时没有任何css设置，通过浏览器观察，html元素与body元素的高度都是0，但是此时document.documentElement.clientHeight 显示为页面可见区域也就是整个视口的高度，document.body.clientHeight显示为0
  - 如果加上css,body{height: 100%;} 此时结果与上一条一样
  - 如果加上css html, body { height: 100% } 此时 document.documentElement.clientHeight与document.body.clientHeight的值一样，都是页面可见区域也就是整个视口的高度。
    
    综上所述，通常可通过document.documentElement.clientHeight来获取视口的高度。但是一般情况下，都会设置html, body { height: 100% }，所以一般情况下，这两个值是一样的，都是视口高度。
  - 同样当body高度高于视口高度，导致html元素内出现滚动条，此时document.documentElement.clientHeight是屏幕可视区域高度，document.documentElement.scrollHeight 的高度包含溢出的部分，即等于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)  //屏幕可视区域高度
    console.log(document.body.clientHeight)  //屏幕可视区域高度
    console.log($wrap.clientHeight)  //屏幕可视区域高度
      //子元素高于父元素，内部有滚动条，此时高度包含子元素溢出的部分，即等于子元素高度
    console.log($wrap.scrollHeight)  
    console.log($box.clientHeight)  //子元素内部没有滚动条 等于子元素实际高度
    console.log($box.offsetHeight)  //子元素内部没有滚动条 等于子元素实际高度
  }
</script>
</html>

兮木兮木

关注

2
点赞
踩
11

收藏

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

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

扫一扫