JS获取div高度的方法

有时在写页面时，需要获取一个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高度的方法

转载于:https://www.cnblogs.com/xiaoshen666/p/10968750.html

JS获取div高度的方法相关推荐

在html上js添加宽度,js 获取div高度并重新设置div高度与宽度
js 获取div高度并重新设置div高度与宽度 js 获取div高度并重新设置div高度与宽度 var $=function(id) { return document.getElementById( ...
Vue.js 获取元素高度的方法【记录】
Vue.js获取下面div的height: <div ref="element"></div> 1.获取高度值:(内容高+padding+边框) let h ...
前端js获取div的选择器方法
目录获取class类三种方法1 方法2 方法3 最后获取class类三种方法1 var divs1 = document.getElementsByClassName('swiper-slid ...
js 获取自适应高度div的高度
忙了将近一个月的论坛官网终于做好了,今天在调试bug,遇到了一个问题,设计稿(左)和实际(右): 好了大家发现问题了吧,就是最下方的版权块定位问题,方案是在屏幕中最新回复数量少或者无回复时,屏幕无 ...
js获取div元素高度和宽度的方法
前端web页面中,js可以很方便的获取div元素的高度和宽度,那么这篇文章就说一说原生JS与JQ如何快速的获取DIV元素的高度和宽度的方法. js获取div元素高度与宽度的方法 js获取div元素的高 ...
php获取div高度,JS获取一个未知DIV高度的方法
本文实例讲述了JS获取一个未知DIV高度的方法.分享给大家供大家参考,具体如下: 通过元素的clientHeight属性能够得到元素的高度,如:var height = element.clientH ...
html中js隐藏div的高度,jQuery实现获取隐藏div高度的方法示例
jQuery实现获取隐藏div高度的方法示例发布时间:2020-09-22 19:27:55 来源:脚本之家阅读:95 作者:zhuyangxing 本文实例讲述了jQuery实现获取隐藏div高 ...
html 获得div的高度,如何用js获取div不确定的自适应高度（currentStyle与offsetHeight）...
设计网页时,一些元素(如div)因显示的内容多少事先不确定,所以不能固定高度,也就是让它根据内容的多少自动调整高度,即自适应高度. 对于div元素不确定的自适应高度,如何用js获取当前高度呢?一般有两 ...
js获取DIV的位置坐标的三种方法！
js获取DIV的位置坐标的三种方法! 方法一: var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect( ...

JS获取div高度的方法

JS获取div高度的方法相关推荐

最新文章

热门文章