document.getElementsByClassName('xxx')[0].clientHeight 获取元素高度之坑

最新推荐文章于 2026-06-22 13:33:02 发布

原创

最新推荐文章于 2026-06-22 13:33:02 发布 · 1w 阅读

收录于

当前文章被以下社区和专栏收录：

在Vue项目中，使用`document.getElementsByClassName('xxx')[0].clientHeight`获取元素高度时，发现在华为 nova 系列和Pro30等异形屏设备上高度返回为0，导致滚动功能出现问题。常规的在`mounted`生命周期钩子中获取元素属性的方法失效。通过查阅资料和尝试，发现`setTimeout`可以解决这个问题，成功获取到正确的元素高度。

vue获取元素高度为0

document.getElementsByClassName(‘xxx’)[0].clientHeight获取元素高度在部分异性屏上获取的高度为0（华为novas、pro）
在这里插入图片描述
日常开发过程中，使用了better-scoll做了上拉加载下拉刷新的功能。由于列表展示使用了absolute定位，为了不遮挡顶部的tab，所以需要做一个top的计算。最先想到的是 let h2 = document.getElementsByClassName(‘title’)[0].clientHeight，动态去获取tab的高度，动态获取主要是能够根据不通机型、不通尺寸的屏幕获取其实际大小。
后来测试发现，竟然在华为novas 机型、最新pro30等异形屏上出现了问题，列表直接将tab全部遮挡住了。断点调试后发现， let h2 = document.getElementsByClassName(‘title’)[0].clientHeight ，h2 的值竟然一直是0。由于平时也经常在vue上获取元素，知道一般都是在mounted生命周期中获取元素的属性，但是这次却失效了。
查了资料，发现确实在华为上述等机型中会出现这个问题，网上也给了一些方案，仍然没有奏效（比如使用nextTick() => {}）。忽然想到nextTick和setTimeout有异曲同工之妙，使用了setTimeout后成功了。