有时在写页面时，需要获取一个div的高度。怎么才能获取呢？哈哈，先上结论。有两种方法。

  • offsetHeight 、clientHeight
  • getComputedStyle

offsetHeight 与 clientHeight
这两个属性都能获取元素的高度，它们有什么区别呢？
代码说话~

<!DOCTYPE html>

<html>

    <head>

        <title>demo</title>

        <meta charset="utf-8">

        <style type="text/css">

            #demo {

                width: 100px;

                height: 200px;

                background: yellow;

                margin: 10px;

                padding: 10px;

                border: 2px solid blue;

            }

        </style>

    </head>

    <body>

        <div id="demo">hello</div>

        <script type="text/javascript">

            var div = document.getElementById('demo');

            console.log(div.offsetHeight); // 224

            console.log(div.clientHeight); // 220

        </script>

    </body>

</html>

可以看出
offsetHeight = content + border + padding = 200 + 2 * 2 + 10 * 2 = 224
clientHeight = content + padding = 200 + 2 * 10 = 220
两个属性的差距于是就显而易见了。同样返回元素的高度，offsetHeight的值包括元素内容+内边距+边框，而clientHeight的值等于元素内容+内边距。区别就在于有没有边框~
但是，问题来了，我们想获取元素本身的高度呢？于是——
请往下看~
1，有小伙伴可能会说，我们可以直接利用style属性获取元素高度。然而在上面的代码中，

console.log(div.style.height) // ''

为空！
这是因为style属性只能获取元素标签style属性里的值。对于一个光秃秃的<div>，style的输出是空的。
下面把内部样式表中的高度注释掉，写在行内样式中，改动如下。

#demo {

    width: 100px;

    /*height: 200px;*/

    background: yellow;

    margin: 10px;

    padding: 10px;

    border: 2px solid blue;

}


<div id="demo" style="height: 200px">hello</div>

这个时候style属性的输出为

console.log(div.style.height) // 200px

完美获得元素高度。
可是。问题又来了，如果我们每次都要写成内联样式，也太费事了吧。那么，该怎么办？
2，getComputedStyle
getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）；这和style属性只能获取内联样式的行为形成了鲜明的对比。除此之外，getComputedStyle是只读的，但是style能文能武，可读可写，我们也可以利用它动态设置元素的高度。
我们只需输入这么一行代码。

window.getComputedStyle(div);

我只截了部分，可以清晰地看到，getComputedStyle方法取得了元素的所有样式。
嗯，很适合查询。
可是我们只想要高度呀。那就让getPropertyValue方法来帮忙getPropertyValue方法可以获取CSS样式申明对象上的属性值。
如。

console.log(window.getComputedStyle(div).getPropertyValue('height')); // 200px

耶，问题解决。
顺便要说一下，currentStyle属性也可以利用，不过这是IE浏览器的自娱自乐。兼容性极差。
想要更深入研究的，请参考张鑫旭大神的博客获取元素CSS值之getComputedStyle方法熟悉，再次膜拜大神~
---8.16补充---
根据@漫漫前端的评论，还有一种方法。
Element.getBoundingClientRect()方法获取与元素相关的CSS属性边框集合。
返回对象中共有6个属性。

当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。如果不希望属性值随视口变化，那么只要给top、left属性值加上当前的滚动位置（通过window.scrollX和window.scrollY），这样就可以获取与当前的滚动位置无关的常量值。
详情请参考Element.getBoundingClientRect()
再次END。

作者：公子七
链接：https://www.jianshu.com/p/58c12245c2cc
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

原文 JS获取div高度的方法

JS获取div高度的方法的更多相关文章

  1. JS获取网页宽高方法集合

    JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高 document.body ...

  2. js获取div基础元素

    1.js获取div元素 clientHeight 获取对象的高度,不计算任何边距.边框.滚动条,但包括该对象的补白. clientLeft 获取 offsetLeft 属性和客户区域的实际左边之间的距 ...

  3. JS获取标签内容的方法

    JS获取标签内容的方法 测试代码 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  4. js获取浏览器高度和宽度值,尽量的考虑了多浏览器。

    js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...

  5. js获取url参数的方法

    js获取url参数的方法有很多. 1.正则分析 function getQueryString(name) { var reg = new RegExp("(^|&)" + ...

  6. jquery、js获取页面高度宽度等

    jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...

  7. （转）用JS获取地址栏参数的方法（超级简单）

    转自http://www.cnblogs.com/fishtreeyu/archive/2011/02/27/1966178.html 用JS获取地址栏参数的方法(超级简单) 方法一:采用正则表达式获 ...

  8. 【转】js 获取浏览器高度和宽度值(多浏览器

    原文地址:http://www.jb51.net/article/19844.htm js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ...

  9. js获取url传值的方法

    这篇文章主要介绍了js获取url传值的方法,实例分析了字符串分割与正则分析两种方法,并补充了一个基于正则匹配实现的js获取url的get传值函数,需要的朋友可以参考下 js获取url参数值: inde ...

随机推荐

  1. Memory Network

    转自:https://www.jianshu.com/p/e5f2b20d95ff,感谢分享! 基础Memory-network 传统的RNN/LSTM等模型的隐藏状态或者Attention机制的记忆 ...

  2. linux使用glibc版本安装mysql8.0.12

    1.前言 使用yum安装虽然很方便,但是如果要是在没有公网的环境下,是没有办法使用yum源的.所以我们可以使用mysql提供的glibc版本的安装包,进行安装. 但是在安装之前,一定要将以前的版本删除 ...

  3. CentOS7数据库架构之NFS+heartbeat+DRBD（亲测，详解）

    目录 参考文档 理论概述 DRBD 架构 NFS 架构部署 部署DRBD 部署heartbeat 部署NFS及配合heartbeat nfs切记要挂载到别的机器上不要为了省事,省机器 参考文档 htt ...

  4. C#的预处理指令

  5. 《python解释器源码剖析》第13章--python虚拟机中的类机制

    13.0 序 这一章我们就来看看python中类是怎么实现的,我们知道C不是一个面向对象语言,而python却是一个面向对象的语言,那么在python的底层,是如何使用C来支持python实现面向对象 ...

  6. Python使用selenium模拟点击(一)

    本文适合有点Python基础阅读,(没基础的话,相对的比较蒙蔽,争取能让小白能一步一步跟上来) 2019-03-05 14:53:05 前几天由于需要到一个网站进行签到~~听说Python能够模拟请求 ...

  7. jade安全转义和非转义

      - var data = 'text' - var htmlData = ')</script><span>script</span>' 例如上面的例子,假如没 ...

  8. Nginx的简单了解与使用

    一.产生背景 我们日常生活中经常遇到的问题 这是几年前的12306,现在的12306基本上不会出现这样的问题了 上述场景产生的主要 2 大原因:1.巨大流量2.单台服务器资源和能力有限在海量并发的环境 ...

  9. python | 不可变数据类型

    目录 第1节 分类 第2节 不可变数据类型 2.1 布尔型(bool) 2.2 数字型(number) 2.3 字符串(string) 2.4 元组(tuple) 第1节 分类 python中有7种标 ...

  10. MongoDB同步机制

    复制 在此页 冗余和数据可用性 在MongoDB中复制 异步复制 自动故障转移 读取操作 交易次数 更改流 附加的功能 甲副本集 MongoDB中是一组mongod其保持相同的数据集的过程.副本集提供 ...