getBoundingClientRect 和 clientHeight 在元素设置scale样式时获取高度值的一些区别

前言

开发中遇到个需求，需要对弹出框进行定位处理，在正常左下情况展示时，由于屏幕过小，会导致内容显示不全，这个时候需要将弹框放到字段上方去，里面就涉及到了获取弹框元素的高度和剩余展示高度的计算。

第一反应想到了getBoundingClientRect方法，即可以返回高度、宽度、还能返回元素的定位，没花多少时间这个功能就开发完成了。

在后续测试验证的过程中，给我反馈这个定位在小屏幕下还是有问题，我当时就很纳闷，明明自己验证过的啊，在确定代码已经是同步更新后，我拿上了测试的页面验证了起来，果然，弹框的位置依旧在下方没有触发剩余高度的计算规则。

分析

一番调试后，找到了原因，元素返回的高度是0，这就奇怪了，明明用了getBoundingClientRect这个方法啊，而且这个元素也没有被隐藏，这是为啥呢？

仔细看了下弹出框的元素，发现有个transform: scale(0)的样式，当这个缩放样式存在时，上述方法返回的高度、宽度就是0，当缩放样式去除后，返回的宽度和高度值正常。

对于这个scale消失的时机我这边也没有很好的处理方法，于是便想到了可以试试元素的clientHeight属性，嗯，这个值不会受上面scale css属性的影响，始终返回的是正常值。

后续特地查了下资料，看到w3c官方手册里对clientHeight的一段解释说明：

Return the unscaled height of the padding edge excluding the height of any rendered scrollbar between the padding edge and the border edge, ignoring any transforms that apply to the element and its ancestors.

翻译过来大体上的意思就是返回未缩放元素的高度。

那可想而之，getBoundingClientRect返回的就是元素在页面上实际展示的高度了。

除此之外，还要注意的是，clientHeight属性返回的值是一个四舍五入的整数，如果我们想要一个精确的数字，还是需要使用getBoundingClientRect方法。