Javascript获取element内容高度的方法

最初在用到Javascript的时候，就使用的是jQuery。相对于javascript那么老长的方法名，jQuery那么简洁的方法名相当省键盘。原想着这辈子就是你（jQuery）了，但是随着原生Javascript的日益强大，所以在最近改写的一个jQuery项目的时候，想把jQuery的支持去掉。结果在获取element高度的时候发现了不一致的地方，所以对jQuery和Javascript中对高度的获取方法做一个分析。

jQuery

jQuery有三个获取高度的方法：.height()、.innerHeight()和.outerHeight()。

.height()

返回当前元素的经过样式计算过的高度值，也可以用来设置元素的高度值。这个高度值是元素内容的高度值，不包含padding，margin和border。

.css('height') 和 .height()之间的区别是后者返回一个没有单位的数值（例如，400），前者是返回带有完整单位的字符串（例如，400px）。其底层运作用到了Javascript的getComputedStyle以及getPropertyValue方法。

.innerHeight()

为元素的当前计算高度值,包含元素内容的高度值和padding，不包括margin和border。 innerHeight

.outerHeight()

元素的当前计算高度值,包含元素内容的高度值、padding，border和选择性的margin。 innerHeight

如果includeMargin参数是true，那么margin也会被包含。

Javascript

一般来说在Javascript有三种高度：clientHeight，offsetHeight和scrollHeight。

clientHeight

返回元素的inner height，包含内容高度和padding，不包含水平滚动条高度，border和margin。

offsetHeight

offsetHeight包含元素的内容高度、border、padding和水平滚动条的高度（如果有则加上）。

scrollHeight

scrollHeight包含了不可见部分元素内容整体的高度和padding。也可以描述为，clientHeight + 不可见部分内容高度。总结jQuery和Javascript获取元素高度的知识后，再来看看我的问题。在Javascript中寻找替代jQuery的.height()的方法。从列出的方法来看，clientHeight、offsetHeight和scrollHeight均无法代替jQuery的height()。从height()的底层实现来看，用到getComputedStyle方法，所以这个应该是正解了。

var element_height = window.getComputedStyle(element, null).height

使用如上方法，可以得到带px单位的元素高度。如果不想带px，则：

var element_height = window.getComputedStyle(element, null).height.split("px")[0]

所以在原生Javascript中，上面的方法则可以代替jQuery的.height()。