有时在写页面时，需要获取一个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. 关于微信小程序获取多个formId的实现方法

    在此之前,很多人使用过form和button的多层嵌套来实现点击一次获取多个formId的目的,如下图所示,点击一次“提交”,可以获取到多个formId 但是在今年3月份,这个投机取巧的方法(算是微信 ...

  2. Go 方法使用

    方法的定义 在 Go 语言里,方法和函数只差了一个,那就是方法在 func 和标识符之间多了一个参数. type user struct { name string, email string, } ...

  3. ARC模式下获取retainCount的方法

    _objc_rootRetainCount(obj)可以获取obj的retainCount,不过不清楚是不是私有api,因此建议调试时使用.

  4. 【OGG 故障处理】OGG-01031

    故障原因 -------------------- 网络异常,导致DP进程异常中断   故障现象 -------------------- 源端DP 进程全部挂起,且启动失败 GGSCI 34> ...

  5. v-cloak 的用法

    https://blog.csdn.net/knqiufan/article/details/81002957

  6. django的信号应用

    问题? 比如说我们在操作数据库的时候,要在插入数据之前写入日志,插入完成之后也写入日志,那这个就会用到我们今天的django信号. 也许你会想到,函数装饰器的有这样的功能.其实不用那个,django的 ...

  7. Qemu: User mode emulation and Full system emulation

    转载: https://wiki.edubuntu.org/UbuntuDevelopment/Ports QEMU QEMU is a processor emulator and supports ...

  8. centos7误删yum源的解决办法 ( -bash: yum: command not found)

    这里以安装阿里的yum源为例: 1.查看自己的centos版本 cat /etc/redhat-release 2.进入阿里云源站地址:http://mirrors.aliyun.com/centos ...

  9. C++ 输出PPM格式图片文件

    PPM简介 学习图形学时为了直观地观察结果,需要输出图片,而PPM是一种最简单的图片格式,非常适合新手使用. PPM文件的内容大概是这样的: 第一行固定为P3,代表写入的是PPM格式的RGB图像,除此 ...

  10. [GDOI2014]采集资源

    题目概述 题目描述 魔兽争霸3中,战略资源的采集通过使用农民.苦工.小精灵以及寺僧来进行. 在魔兽争霸4的开发中,玻璃渣觉得这种模式太过单一,于是他们想添加更多的单位来使采集的模式更加丰富. 在新的模 ...