测试用例：

<!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('=================================\n');

        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的更多相关文章

  1. 关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究

    我是以chrome浏览器做的研究. 先看一段代码: <script> window.addEventListener('DOMContentLoaded',function(){ var ...

  2. [DOM基础]offsetHeight,clientHeight,scrollHeight,innerHeight,outerHeight等属性的解释

    由于经常搞混这几个属性,所以查找资料总结一下,方便以后翻出来温习. 一.偏移量-以offset开头的 1.offsetHeight:元素在垂直方向上占用的空间大小,像素.包括元素的高度.可见的水平滚动 ...

  3. offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别

    这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离 ...

  4. offsetHeight,clientHeight,scrollHeight,offsetY等属性的理解

    el.offsetHeight = height + padding + border(滚动条是在边框内的,自然也包括在内) el.clientHeight = 可视化看到的高度 (就是content ...

  5. JavaScript获取DOM元素位置和尺寸大小

      在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScri ...

  6. 获取DOM元素位置和尺寸大小

    JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...

  7. jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...

  8. 第一百一十七节，JavaScript，DOM元素尺寸和位置

    学习要点: 1.获取元素CSS大小 2.获取元素实际大小 3.获取元素周边大小 本章,我们主要讨论一下页面中的某一个元素它的各种大小和各种位置的计算方式,以便更好的理解. 一．获取元素CSS大小 1. ...

  9. height、clientHeight、offsetHeight、scrollHeight、height()、 innerHeight()、outerHeight()等的区别

    1.height height是css属性,这个属性定义元素内容区的高度,在内容区外面可以增加内边距.边框和外边距. 当  box-sizing: content-box 时,高度应用到元素的内容框. ...

随机推荐

  1. 2019ICPC南昌现场赛总结

    非常可惜的一场比赛,多了60分钟罚时与银牌无缘.今年6场ICPC网络赛里面打的最差的就是南昌站,冥冥之中自有天意吧,最后被安排去了南昌. 开场被队友叫去先看的L,说是足球,发现就是简单模拟,就直接上机 ...

  2. Django框架1——视图和URL配置

    三个命令 1.创建一个django项目 在cmd中:django-admin.py startproject project_name D:\python\django_site>django- ...

  3. hadoop 空间配置

    hadoop-------------- 分布式计算框架. common // hdfs //存储 mapreduce //MR,编程模型. yarn //资源调度. 集群部署----------- ...

  4. Java基础IO类之File类

    大三了,目前基础太差了,重新学习过!代码如下,里面都有详细的解释每一行代码代表的意思~ package IODemo; import java.io.File; import java.io.File ...

  5. drbd+nfs+keepalived

    写的很详细 理论知识: https://www.cnblogs.com/kevingrace/p/5740940.html 写的很详细 负载: https://www.cnblogs.com/kevi ...

  6. YIii2.0-学习笔记之服务器安装

    最近项目需要,学习了一下yii2.0框架 第一步:  安装composer--------作为一个phper  composer不会用可能有点不合适 下载composer.phar文件 #curl - ...

  7. IIS发布问题解决

    一. HTTP Error 502.5 - ANCM Out-Of-Process Startup Failure ://安装AspNetCoreModule托管模块后执行1. net stop wa ...

  8. 淘宝图片指纹匹配功能c#实现

    #region 生成图片及图片比较 public String GetHash(Image SourceImg) { Image image = ReduceSize(SourceImg); Byte ...

  9. React Native 开发豆瓣评分（一）环境搭建&配置模拟器

    详细可参考 官方文档,这里进记录一些重要过程. 安装环境 下载 Android Studio 选择 Custom 进行安装: Android SDK Android SDK Platform Perf ...

  10. TR-TR模块资料汇总

    转载: TR模块培训 https://www.docin.com/p-1704805923.html 现金管理(Cash Management)和预算控制(Cash Budget Management ...