js获取元素高度

最新推荐文章于 2024-05-03 11:08:18 发布

代码怎么写！

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量816

点赞数 13

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_56695398/article/details/135127424

版权

//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)

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

console.log(selectDom.clientHeight)

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

console.log(select.scrollHeight)

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

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

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

console.log(selectDom.offsetTop)

关注