彻底搞清楚DOM元素的height,offsetHeight,clientHeight,scrollHeight

Posted lyralee

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了彻底搞清楚DOM元素的height,offsetHeight,clientHeight,scrollHeight相关的知识，希望对你有一定的参考价值。

测试用例：

技术图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
          margin: 0; 
          padding: 0
        }
        html{
            background: #00ffee;
            height: 600px;
        }
        body{
            border: 5px solid #ff0;
            margin:5px;
            padding: 5px;
            height: 800px;
        }
        #root {
            border: 5px solid red;
            width: 100px;
            height: 200px;
            overflow: auto;
            margin: 5px;
            padding: 5px;
        }
        #child {
            height: 300px;
            width: 200px;
            border: 5px solid blue;
            margin: 5px;
            padding: 5px;
            overflow: auto;
        }
        #hehe {
            height:200px;
            width: 300px;
            border: 5px solid purple;
            padding: 5px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div style="height: 100px"></div>
    <div id="root">
        <div id="child">
            <div id="hehe"></div>
        </div>
    </div>
    <script>
      document.onclick = function() {
          consolelog();
      }
      function consolelog () {
        let html = document.documentElement
        console.log("html.clientHeight=",html.clientHeight)
        console.log("html.clientWidth=",html.clientWidth)
        console.log("html.offsetHeight=",html.offsetHeight)
        console.log("html.offsetWidth=",html.offsetWidth)
        console.log("html.scrollHeight=",html.scrollHeight)
        console.log("html.scrollWidth=",html.scrollWidth)
        console.log(‘================================‘)
        let body = document.body;
        console.log("body.clientHeight=",body.clientHeight)
        console.log("body.clientWidth=",body.clientWidth)
        console.log("body.offsetHeight=",body.offsetHeight)
        console.log("body.offsetWidth=",body.offsetWidth)
        console.log("body.offsetTop=",body.offsetTop)
        console.log("body.offsetLeft=",body.offsetLeft)
        console.log("body.offsetParent=",body.offsetParent)
        console.log("body.scrollHeight=",body.scrollHeight)
        console.log("body.scrollWidth=",body.scrollWidth)
        console.log("body.scrollTop=",body.scrollTop)
        console.log("body.scrollLeft=",body.scrollLeft)
        console.log(‘=================‘);
        let root = document.getElementById("root");
        console.log("root.clientHeight=",root.clientHeight)
        console.log("root.clientWidth=",root.clientWidth)
        console.log("root.offsetHeight=",root.offsetHeight)
        console.log("root.offsetWidth=",root.offsetWidth)
        console.log("root.offsetTop=",root.offsetTop)
        console.log("root.offsetLeft=",root.offsetLeft)
        console.log("root.offsetParent=",root.offsetParent)
        console.log("root.scrollHeight=",root.scrollHeight)
        console.log("root.scrollWidth=",root.scrollWidth)
        console.log("root.scrollTop=",root.scrollTop)
        console.log("root.scrollLeft=",root.scrollLeft)
        //
        console.log(‘=================================
‘);
        let child = document.getElementById("child");
        console.log("child.clientHeight=",child.clientHeight)
        console.log("child.clientWidth=",child.clientWidth)
        console.log("child.offsetHeight=",child.offsetHeight)
        console.log("child.offsetWidth=",child.offsetWidth)
        console.log("child.offsetTop=",child.offsetTop)
        console.log("child.offsetLeft=",child.offsetLeft)
        console.log("child.offsetParent=",child.offsetParent)
        console.log("child.scrollHeight=",child.scrollHeight)
        console.log("child.scrollWidth=",child.scrollWidth)
        console.log("child.scrollTop=",child.scrollTop)
        console.log("child.scrollLeft=",child.scrollLeft)
      }
    </script>
</body>
</html>
打开控制台，单击页面，查看各项参数

height: 样式中指定的高度,是content的高度，不含paddding及其他。

clientHeight: 包含padding的高度；

clientHeight = height + padding*2(根据设置的具体情况计算)

offsetHeight: 包含border的高度；

offsetHeight =clientHeight+borderWidth*2

但是：

上面的计算方法，不适用于html元素。其他都适用。
const html = document.documentElement;
const body = document.body;

/****html.offsetHeight*****/
1. 在不设置html高度的情况下; 增加的参数视具体情况不同
html.offsetHeight = body.offsetHeight+ margin*2
2. 如果设置html的高度为height;
html.offsetHeight = height;

/*****html.clientHeight*********/
clientHeight是浏览器可展示区域高度（去除菜单导航等）,永远不变

scrollHeight: 

1)  当前容器没有滚动条时，scrollHeight = clientHeight

2) 当前容器的内容超过容器的高度，出现滚动条时

scrollHeight = 当前容器的padding + child容器(滚动内容)的总高度（offsetHeight+margin）

scrollTop: 

滚动后隐藏的内容的高度。

技术图片

 

offsetTop:

当前容器上边界距离浏览器顶部的距离。

 

以上是关于彻底搞清楚DOM元素的height,offsetHeight,clientHeight,scrollHeight的主要内容，如果未能解决你的问题，请参考以下文章

终于彻底搞清楚了字体的布局高度

5个点彻底搞清楚SpringBoot注解

彻底搞清楚字符编码: ASCII, ISO_8859, GB2312,UCS, Unicode, Utf-8

转：彻底搞清楚javascript中的requireimport和export

MySQL联合索引使用分析 彻底搞清楚什么情况下会走索引

一篇文章让你彻底搞清楚Python中self的含义