测试用例：

<!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. SSM基本案例

    1.搭建环境,导入maven依赖 <properties> <project.build.sourceEncoding>UTF-8</project.build.sour ...

  2. JSP的部分知识(一)

    通过Servlet进行整个网站的开发是可以的. 不过在Servlet中输出html代码,特别是稍微复杂一点的html代码,就会给人一种很酸爽的感觉. 如果能够直接使用Html代码,然后在html中写j ...

  3. 整合MyBatis

    配置数据源相关属性(见前一章节 DataSource配置) 引入依赖 <dependency> <groupId>org.mybatis.spring.boot</gro ...

  4. Inline Hook 钩子编写技巧

    Hook 技术通常被称为钩子技术,Hook技术是Windows系统用于替代中断机制的具体实现,钩子的含义就是在程序还没有调用系统函数之前,钩子捕获调用消息并获得控制权,在执行系统调用之前执行自身程序, ...

  5. 2019 牛客多校五 F. maximum clique 1 (最大团)

    大意: 给定$n$个互不相同的数, 若两个数异或后二进制中$1$的个数不少于$2$则连边, 求最大团. 最大团转为补图最大独立集. 可以发现补图是二分图, 所以直接$dinic$即可. 最大独立集相当 ...

  6. SQL Server的非聚集索引中会存储NULL吗？

    原文:SQL Server的非聚集索引中会存储NULL吗? SQL Server的非聚集索引中会存储NULL吗? 这是个很有意思的问题,下面通过如下的代码,来说明,到底会不会存储NULL. --1.建 ...

  7. 【es6】promise

    一.什么是promise?我们用promise解决什么样的问题 promise是异步编程的一种解决方案:从语法上来说,Promise是一个对象,从他可以获取异步操作的信息:从本意上讲,它是承诺,它承诺 ...

  8. 将网站升级为https并自动续期Https证书。

    Let's Encrypt Let's Encrypt 是一个由Internet Security Research Group (互联网安全研究组)提供的免费,自动化和开放的证书颁发机构. 它秉承着 ...

  9. C#合并选中EXCEL中的各个工作表

    合并选中EXCEL中的各个工作表,以第一个选中的EXCEL文件里的工作表进行匹配,遍历后面的每个EXCEL文件,有相同的工作表就合并: private void button1_Click(objec ...

  10. Go context 介绍和使用

    context 上下文管理 context 翻译过来就是上下文管理,主要作用有两个: 控制 goroutine 的超时 保存上下文数据 WithTimeout 通过下面的一个简单的 http 例子进行 ...