在開發(fā)網(wǎng)站時,有時會遇到獲取元素的高度為0的情況,這時候一般是由于css樣式導(dǎo)致的。
例如,當(dāng)我們給元素添加了如下所示的css樣式: .element { height: 0; overflow: hidden; } 就會導(dǎo)致元素高度為0,因為它設(shè)置了一個固定的高度,并且將超出部分隱藏了起來。這種情況下,我們使用JavaScript獲取元素的高度時,會得到0。
如果想要解決這個問題,可以使用以下方法:
1. 計算內(nèi)容高度 如果我們想獲取元素中裝載內(nèi)容的高度,我們可以使用元素的scrollHeight屬性。 var element = document.querySelector('.element'); var height = element.scrollHeight; 這樣我們就可以獲取到元素內(nèi)容的真實高度。 2. 計算整個元素高度 如果想獲取整個元素的高度,我們可以使用元素的getBoundingClientRect()方法。 var element = document.querySelector('.element'); var height = element.getBoundingClientRect().height; 這個方法會返回一個包含元素四個屬性的對象:top,left,right和bottom。其中,height屬性就是元素的真實高度。
總結(jié)起來,當(dāng)我們遇到獲取元素高度為0的情況時,需要檢查一下是否存在對應(yīng)的css樣式,如果存在,可以使用上述兩種方法來獲取元素的真實高度。