在前端開發中,我們有時需要獲取一個
元素的CSS高度,比如根據不同屏幕尺寸設置一些元素的高度,或者判斷某個元素是否滾動到了可視區域等等。
// 獲取一個div元素的CSS高度的方法如下: var divHeight = document.querySelector('div').getBoundingClientRect().height; console.log(divHeight);
上述代碼中,getBoundingClientRect()
方法返回一個元素的大小及其相對于視口的位置,它返回一個DOMRect
對象,其中包含div元素在頁面中的位置信息。我們通過取得它返回值的height
屬性就可以獲取其CSS高度了。另外,querySelector()
方法返回文檔中第一個匹配指定CSS選擇器的元素。
注意,針對非固定高度的元素(即高度為auto
)getBoundingClientRect().height
方法將返回一個四舍五入的整數,且僅僅在文檔加載完成并且圖片等資源均已加載完畢后才可以獲取正確的元素高度。如果希望動態獲取該元素高度,可以在窗口尺寸變化或元素大小變化時重新獲取。其實若不是非常需要實時獲得高度,一般可以直接在CSS中設置該元素的大小,因而避免了這些繁瑣的操作。
上一篇莫振杰css3百度云
下一篇css設置鼠標顏色