测试用例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         *{
  10.           margin: 0;
  11.           padding: 0
  12.         }
  13.         html{
  14.             background: #00ffee;
  15.             height: 600px;
  16.         }
  17.         body{
  18.             border: 5px solid #ff0;
  19.             margin:5px;
  20.             padding: 5px;
  21.             height: 800px;
  22.         }
  23.         #root {
  24.             border: 5px solid red;
  25.             width: 100px;
  26.             height: 200px;
  27.             overflow: auto;
  28.             margin: 5px;
  29.             padding: 5px;
  30.         }
  31.         #child {
  32.             height: 300px;
  33.             width: 200px;
  34.             border: 5px solid blue;
  35.             margin: 5px;
  36.             padding: 5px;
  37.             overflow: auto;
  38.         }
  39.         #hehe {
  40.             height:200px;
  41.             width: 300px;
  42.             border: 5px solid purple;
  43.             padding: 5px;
  44.             margin: 5px;
  45.         }
  46.     </style>
  47. </head>
  48. <body>
  49.     <div style="height: 100px"></div>
  50.     <div id="root">
  51.         <div id="child">
  52.             <div id="hehe"></div>
  53.         </div>
  54.     </div>
  55.     <script>
  56.       document.onclick = function() {
  57.           consolelog();
  58.       }
  59.       function consolelog () {
  60.         let html = document.documentElement
  61.         console.log("html.clientHeight=",html.clientHeight)
  62.         console.log("html.clientWidth=",html.clientWidth)
  63.         console.log("html.offsetHeight=",html.offsetHeight)
  64.         console.log("html.offsetWidth=",html.offsetWidth)
  65.         console.log("html.scrollHeight=",html.scrollHeight)
  66.         console.log("html.scrollWidth=",html.scrollWidth)
  67.         console.log('================================')
  68.         let body = document.body;
  69.         console.log("body.clientHeight=",body.clientHeight)
  70.         console.log("body.clientWidth=",body.clientWidth)
  71.         console.log("body.offsetHeight=",body.offsetHeight)
  72.         console.log("body.offsetWidth=",body.offsetWidth)
  73.         console.log("body.offsetTop=",body.offsetTop)
  74.         console.log("body.offsetLeft=",body.offsetLeft)
  75.         console.log("body.offsetParent=",body.offsetParent)
  76.         console.log("body.scrollHeight=",body.scrollHeight)
  77.         console.log("body.scrollWidth=",body.scrollWidth)
  78.         console.log("body.scrollTop=",body.scrollTop)
  79.         console.log("body.scrollLeft=",body.scrollLeft)
  80.         console.log('=================');
  81.         let root = document.getElementById("root");
  82.         console.log("root.clientHeight=",root.clientHeight)
  83.         console.log("root.clientWidth=",root.clientWidth)
  84.         console.log("root.offsetHeight=",root.offsetHeight)
  85.         console.log("root.offsetWidth=",root.offsetWidth)
  86.         console.log("root.offsetTop=",root.offsetTop)
  87.         console.log("root.offsetLeft=",root.offsetLeft)
  88.         console.log("root.offsetParent=",root.offsetParent)
  89.         console.log("root.scrollHeight=",root.scrollHeight)
  90.         console.log("root.scrollWidth=",root.scrollWidth)
  91.         console.log("root.scrollTop=",root.scrollTop)
  92.         console.log("root.scrollLeft=",root.scrollLeft)
  93.         //
  94.         console.log('=================================\n');
  95.         let child = document.getElementById("child");
  96.         console.log("child.clientHeight=",child.clientHeight)
  97.         console.log("child.clientWidth=",child.clientWidth)
  98.         console.log("child.offsetHeight=",child.offsetHeight)
  99.         console.log("child.offsetWidth=",child.offsetWidth)
  100.         console.log("child.offsetTop=",child.offsetTop)
  101.         console.log("child.offsetLeft=",child.offsetLeft)
  102.         console.log("child.offsetParent=",child.offsetParent)
  103.         console.log("child.scrollHeight=",child.scrollHeight)
  104.         console.log("child.scrollWidth=",child.scrollWidth)
  105.         console.log("child.scrollTop=",child.scrollTop)
  106.         console.log("child.scrollLeft=",child.scrollLeft)
  107.       }
  108.     </script>
  109. </body>
  110. </html>

打开控制台，单击页面，查看各项参数

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

clientHeight: 包含padding的高度；

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

offsetHeight: 包含border的高度；

  1. offsetHeight =clientHeight+borderWidth*2

但是：

  1. 上面的计算方法，不适用于html元素。其他都适用。
  2. const html = document.documentElement;
  3. const body = document.body;
  4.  
  5. /****html.offsetHeight*****/
  6. 1. 在不设置html高度的情况下; 增加的参数视具体情况不同
  7. html.offsetHeight = body.offsetHeight+ margin*2
  8. 2. 如果设置html的高度为height;
  9. html.offsetHeight = height;
  10.  
  11. /*****html.clientHeight*********/
  12. clientHeight是浏览器可展示区域高度（去除菜单导航等）,永远不变

scrollHeight:

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

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

  1. 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. （十六）springMvc 补充

    文章目录 数据回显 `@ModelAttribute` && `@SessionAttributes` 注解 数据回显 对 pojo 数据回显的支持 ,springMvc 会默认的将传 ...

  2. Python后台执行不启用缓存

    1.运行时加-u参数,如 # python3 -u test.py >> test.log & 用man查看python的-u参数,说明如下: Force stdin, stdou ...

  3. Qt：用 __thread 关键字让每个线程有自己的全局变量

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/wsj18808050/article/d ...

  4. Django model反向关联名称的方法（转）

    原文:https://www.jb51.net/article/152825.htm

  5. dev 从表处理

    从表列名,从表选中行和主表选中一样,var selectrow = detailView.GetRow(detailView.FocusedRowHandle) as obj; private voi ...

  6. ef报错（因为相同类型的其他实体已具有相同的主键值）

    修改数据的时候查询了下数据 于是报错了,我吧查询不加入缓存中,吧getbyid的方法改成.AsNoTracking().FirstOrDefault(p => p.x== x)

  7. TR-TR模块资料汇总

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

  8. 【Distributed】分布式解决方案【汇总】

    一.问题引出 二.分布式Session问题 三.网站跨域问题 四.分布式任务调度平台 五.分布式配置中心 六.分布式锁解决方案 七.缓存技术 一.问题引出 [Distributed]分布式系统中遇到的 ...

  9. 虚拟机安装master，克隆slave0、slave1（多台机相连，网络匹配）

    1.在虚拟机中创建一个名叫master的主机 2.创建成功后,打开编辑选项——虚拟网络网络编辑器,填网关 3.打开终端,进入root权限,编写命令 设置虚拟机DNS 4.给master网络配置好后,克 ...

  10. Linux软件包（源码包和二进制包）及其区别和特点

    Linux 下的软件包众多,而且几乎都是经 GPL 授权的,也就是说这些软件都免费,振奋人心吧?而且更棒的是,这些软件几乎都提供源代码(开源的),只要你愿意,就可以修改程序源代码,以符合个人的需求和习 ...