测试用例：

<!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. pycharm 使用black

    pycharm 使用black The Uncompromising Code Formatter By using Black, you agree to cede control over min ...

  2. 【Qt】Qt5.12编译MySQl5.7驱动(亲自测试成功)

    目录 00. 目录 01. 安装Qt5.12 02. 打开MySQL源码项目 03. 编译MySQL驱动代码 04. 修改mysql.pro文件 05. 编译之后得到对应的库 06. 拷贝动态库到指定 ...

  3. 邮件标准协议：MIME（Multipurpose Internet Mail Extensions）

    MIME(多用途互联网邮件扩展)指的是一系列电子邮件技术规范 ,主要包括 RFC 2045~2049   传统的电子邮件只能使用 ASCII 字符,导致非英文字符都不能在电子邮件中使用 而且电子邮件中 ...

  4. CentOS && Ubuntu 环境下 Docker 的安装配置

    CentOS 7 install Docker Docker 支持的 centos 版本:CentOS 6.5(64-bit)或更高的版本 使用 yum 安装 1)确保 yum 包更新到最新 [roo ...

  5. [转载]Python 包管理工具

    [转载]Python 包管理工具 最近由于机缘巧合,使用各种方法安装了一些Python包,所以对Python的包管理开始感兴趣.在网上找到一篇很好的文章:https://blog.zengrong.n ...

  6. Mac 下编译 Hadoop

    Mac 下编译 Hadoop-2.9.2 系统环境 系统: Mac OS_10.14.4 maven: Apache Maven 3.6.0 jdk: jdk_1.8.0_201 ProtocolBu ...

  7. H5表单新特性

    1.HTML5表单新特性之——新的input type <input type=" "> HTML5之前已有的input type: text.password.rad ...

  8. php的文件上传及下载，附带显示文件及目录

    主页面wenjianceshi.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  9. mysql各版本驱动

    http://central.maven.org/maven2/mysql/mysql-connector-java/5.1.9/

  10. mysql的2种备份mysqldump 和 Xtrabackup

    mysqldump备份方式 备份 mysqldump -uroot -p 数据库名 > 备份的文件名 恢复(先关闭数据库) mysql -uroot -p 数据库名 < 备份的文件名 Xt ...