js获取元素高度

大家好，欢迎来到IT知识分享网。

//el-select下拉选择 const selectDom = document.querySelector(".el-select-dropdown .el-select-dropdown__wrap")

一、offsetHeight、getBoundingClientRect( )

获取的元素高度包括内容、padding、border，不包括margin，getBoundingClientRect( )方法可以获取元素的位置和大小信息，包括left、right、top、bottom、width、height

console.log(selectDom.offsetHeight) const rect = selectDom.getBoundingClientRect(); console.log(rect.height)

二、clientHeight

获取的元素高度包括内容、padding，不包括border、margin

console.log(selectDom.clientHeight)

 三、scrollHeight

获取的元素高度是内容的真实高度，即整个内容在没有滚动条的情况下所占据的高度包括被隐藏的部分

console.log(select.scrollHeight)

四、getComputedStyle( )

获取元素的计算样式，包括高度、宽度

const styles = window.getComputedStyle(selectDom) console.log(styles.height)

五、offsetTop

获取元素相对于其父元素顶部的距离

console.log(selectDom.offsetTop)