测试用例：

<!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. 创建线程的三种方式（Thread、Runnable、Callable）

    方式一:继承Thread类实现多线程: 1. 在Java中负责实现线程功能的类是java.lang.Thread 类. 2. 可以通过创建 Thread的实例来创建新的线程. 3. 每个线程都是通过某 ...

  2. C++ 生成 voronoi 图 & C++生成泰森多边形图形

    1. 功能 生成voronoi图的一个类 2. 代码 VoronoiDiagramGenerator.h #pragma once //Microsoft Visual Studio 2015 Ent ...

  3. LC 297 Serialize and Deserialize Binary Tree

    问题: Serialize and Deserialize Binary Tree 描述: Serialization is the process of converting a data stru ...

  4. Oracle 11g xe版本---总结1

    一.创建用户和授予权限 1.1 环境: Oracle 11g xe 第三方图形客户端: PLSQL Windows 10 必须登录 HR 用户,下面的查询会使用到 HR 中的表. 1.2 SQL 语句 ...

  5. 地址解析协议（ARP）

    地址解析协议(ARP) 地址解析协议(ARP)是指网络地址和MAC地址之间的转换 当一台主机需要向另一台主机发送数据时,需要知道目的主机的ip地址外还需要知道目的主机的mac地址.源主机首先会在自己的 ...

  6. AX 中临时表应用

    临时表,只要让表的Temporary属性设为yes就行. 今天写代码时发现,假如在一个循环里面把数据插入到临时表里, 假如没有在每次开始时没加clear的话,假如有个字段下一条没数据,会自动带到下一条 ...

  7. js 自定义加减乘除方法（防止js自身计算错误）

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. Spring AOP 多个切点实现:JdkDynamicAopProxy

    Spring Aop 的底层生成代理类i的实现除 jdk的动态代理技术外,还用到了Cglib,不过在封装两者的设计原理上相差不大,只是底层工具不同而已. 本文只分析JdkDynamicAopProxy ...

  9. gradle上传jar包到maven公共仓库

    首先这里说的中央仓库 是指的 https://issues.sonatype.org/ 而不是maven私服. 其次是使用gradle上传jar包,maven上传,网上有很多教程,这里不做赘述. 首选 ...

  10. 最新版Navicate破解激活

    2019年5月5日激活成功 版本12.1.18 Navicat12.1下载地址 http://www.navicat.com.cn/download/navicat-premium有32位和64位,大 ...