如何在jQuery中计算元素的高度？

Question

我正在使用由其他人编写的手风琴。当手风琴最初显示时，每行都会显示出来。初始高度保持不变，然后将它们的高度设置为0.然后当行变为可见时，其高度将恢复为原始值。

但就我而言，手风琴的高度会发生变化，因为我用数据异步填充它们。因此，当行变得可见时，我想计算行数＆＃39;高度基于它的新成员。但是，因为.css('height', 0)的高度设置为0，$(elem).height()为0。

有没有办法计算元素的高度，而不仅仅是检索它的css高度值？

Answer 1

使用jQuery的innerHeight函数来获取元素的计算高度，无边框和边距。

var height = $('#myElement').innerHeight();

修改 使用jQuery的outerHeight函数来获取元素的计算高度，包括填充，边框和可选的边距。

//without margin
var height = $('#myElement').outerHeight();

//with margin
var height = $('#myElement').outerHeight(true);

编辑2： 您也可以将这些结果与原生Javascript进行比较。

var el = document.getElementById('myElement');
var height = el.offsetHeight;

Answer 2

您也可以使用Javascript offsetHeight函数。

var elementHeight = document.getElementById(id_attribute_value).offsetHeight;

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight