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高度的方法
    侵删 联系614506425@qq.com