如何根據內容獲取 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;