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

yzbyxmx

于 2019-08-19 20:55:48 发布

阅读量9.8k

点赞数 2

分类专栏： css vue 文章标签： vue clientHeight document getElementsByClassName

本文链接：https://blog.csdn.net/u013262823/article/details/99760893

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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后成功了。

最低0.47元/天解锁文章