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

Question

I have a react App with a component including a div to have a long text. I have a "Show description" button to expand this long text div. So, in the beginning, I set the div height to 0px and when I click on the Show description button, the div needs to be fully expanded with some animations. The problem is, even though I set the initial height as 0px, I'm not sure how to set the expanded height according to the content. Here is what I tried,

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>

I need to set this "60px" to a variable value which is the actual height of the div with the whole text. When I'm tried with "auto" instead "60px" and "100%": "0%" instead of pixels, the show/hide switch is not working. And when I'm tried with "100%": "0px" , the switch is working but without animations. I think the animation is working only for pixels.

How can I do this to work properly?

Answer 1

one method to get the hight and weight of an element is as bellow:

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