css 获取元素高度,如何获取没有给出高度的元素的高度？

前言

最近在工作中遇到了一个问题，某个需求需要获取元素的高度，就假定是div元素，但是呢因为div中元素的内容是不确定的，所以并没有给div设置高度，在获取高度时，我们首先会想到3中方法

1、div.style.height;

我们会发现输出空，这是因为style对象获取的是定义在内联样式中的属性，所以不可行。

2、$(div).css("height");

我们会发现输出0，很正常因为我们根本没定义height

3、window.getComputedStyle(div)

图中仅截取部分属性

仍然输出0，getComputedStyle()会获取到最终应用在元素上的所有CSS属性对象(即使没有CSS代码，也会把默认的祖宗八代都显示出来),这样看来，因为我们没有定义height，为0也很正常

解决办法

我们可以使用jquery中的height()方法

$(div).height()

轻松解决，但是有个问题需要注意，使用这种方法获取到的高度是元素在页面中的实际高度，包括单位，因为存在一种情况就是，我们在css中给出的是px，但是在代码中我们通过某种方式将页面中所有的px转化为rem，所以我们使用height()获取到的高度值单位为rem，这种转换经常在移动端开发中应用

当然$(height).innerHeight()和$(height).outterHeight()都可以获取到，他们之间的区别如下图

原文：https://www.cnblogs.com/kunmomo/p/10473435.html