测试用例：

<!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. Git服务器搭建--ssh/http

    测试环境 Windows 7 Ultimate, 64-bit 6.1.7601, Service Pack 1(实体机,虚拟机VMware的宿主机) VMware® Workstation 7.1. ...

  2. python 并发的开端

    目录 网络并发 进程的基础 2.操作系统 操作系统的发展史 多道技术 第二代 1955~1965 磁带存储--批处理系统 第三代集成电路,多道程序系统(1955~1965) 进程的理论(重点) 2.操 ...

  3. python 之 数据库（数据库安装方法、基本sql语句、存储引擎）

    第十章 数据库 10.1 数据库介绍 1.数据库相关概念 数据库服务器:本质就是一个台计算机,该计算机之上安装有数据库管理软件的服务端 数据库管理系统RDBMS:本质就是一个C/S架构的套接字软件 库 ...

  4. Redis--hash类型操作命令

    哈希类型hash redis hash 是一个 string 类型的 field 和 value 的映射表,hash 特别适合用于存储对象 哈希类型hash——基本命令 hset /hget /hms ...

  5. C++动态内存常见面试题解析

           malloc/free和new/delete傻傻分不清?动态内存管理的面试题难道你了?来看这篇文章,包你全会. 1.malloc/free和new/delete的区别   (1)mall ...

  6. dotnet Core学习之旅(二):安装IDE

    [重要:文中所有外链不能确保永久有效] >开发工具 高效的开发必然需要一个优秀的集成开发环境(IDE) 对于.NET Core 2.x可以使用包括但不限于以下IDE来进行开发. Visual S ...

  7. java使用poi操作word, 支持动态的行(一个占位符插入多条)和表格中动态行, 支持图片

    依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifa ...

  8. NIO-FileChannel源码分析

    目录 NIO-FileChannel源码分析 目录 前言 RandomAccessFile 接口 创建实例 获取文件通道 FileChannelImpl 创建 写文件 读文件 修改起始位置 获取文件长 ...

  9. Luogu5401 CTS2019珍珠（生成函数+容斥原理+NTT）

    显然相当于求有不超过n-2m种颜色出现奇数次的方案数.由于相当于是对各种颜色选定出现次数后有序排列,可以考虑EGF. 容易构造出EGF(ex-e-x)/2=Σx2k+1/(2k+1)!,即表示该颜色只 ...

  10. redis有序集合数据类型---sortedset

    一.概述 redis有序集合和集合一样,也是string类型元素的集合,且不允许重复的成员. 不同的是每个元素都会关联一个double类型的分数. redis正式通过分数来为集合中的重圆进行从小到大的 ...