如何根据内容获取 HTML 元素的高度？

Question

我有一个带有组件的反应应用程序，其中包含一个 div 以获得长文本。 我有一个“显示说明”按钮来展开这个长文本 div。 因此，一开始，我将 div 高度设置为 0px，当我单击 Show description 按钮时，需要使用一些动画完全展开 div。 问题是，即使我将初始高度设置为 0px，我也不知道如何根据内容设置展开高度。 这是我尝试过的，

descriptionExpanded = (expanded) => {
    this.setState({ descriptionExpanded: expanded })
}

<div style={{ height: descriptionExpanded ? `60px` : '0px', transition: descriptionExpanded ? 'height 0.25s ease-in' : 'height 0.15s ease-out' }}>
    Long text...
</div>
<div onClick={() => this.descriptionExpanded(!descriptionExpanded)}>
    <span>{descriptionExpanded ? 'Hide Description' : 'Show Description'}</span>
</div>

我需要将此“60px”设置为一个变量值，该值是 div 与整个文本的实际高度。 当我尝试使用"auto"而不是"60px"和"100%": "0%"而不是像素时，显示/隐藏开关不起作用。 当我尝试使用"100%": "0px" ，开关正在工作但没有动画。 我认为动画仅适用于像素。

我怎样才能做到这一点才能正常工作？

Answer 1

获取元素高度和重量的一种方法如下：

 var clientHeight = document.getElementById('element_id').clientHeight;
 var clientWidth = document.getElementById('element_id').clientWidth;