前言
在使用 uniapp 开发小程序过程中，我们经常会遇到需要获取 DOM 元素高度的情况。但是，有时候我们会发现通过 uni.createSelectorQuery().select().boundingClientRect() 获取到的高度并不准确。那么这种情况是怎么出现的？又该如何解决呢？本文将为大家详细讲解。
问题出现
首先，我们先来复现一下问题。如下面这个简单的模板，我们需要获取子元素 content 的高度。
<template>
<view class="container">
<view class="content" ref="content">内容区域</view>
</view>
</template>我们可以通过以下方式获取 content 元素的高度：
mounted() {
uni.createSelectorQuery().in(this).select('.content').boundingClientRect(rect => {
console.log(rect.height)
}).exec()
}这样我们就可以在控制台里看到 content 的高度。
但是，当我们给 content 元素加上一些样式，比如：
.content {
margin: 10px;
padding: 20px;
}再次运行程序，我们会发现控制台输出的高度与我们预期的高度不一致，略小于我们期望的高度。这就是我们经常遇到的“获取 DOM 高度不准确”的问题。
原因分析
那么，问题出现的原因是什么呢？在经过查阅资料后，我们可以得知以下原因：
1.单独使用这个样式会导致高度计算错误，产生白边。
2.这是因为 margin 和 padding 对于元素占据的空间是不一样的，margin 是不占据空间的，而 padding 是占据空间的。
由于 boundingClientRect 受到了 padding 和 border 的影响，而 margin 不受影响，所以在 boundingClientRect 获取的高度时会少去 padding 的高度。
解决方案
既然掌握了问题出现的原因，解决方案也就呼之欲出了。我们可以通过以下方法来解决这个问题：
1.通过 uni.createSelectorQuery().exec() 获取父元素的高度，再通过 getComputedStyle 获取子元素的 padding 和 border，从而计算出子元素的实际高度。
mounted() {
uni.createSelectorQuery().in(this).select('.container').boundingClientRect(rect => {
const styles = getComputedStyle(this.$refs.content.$el)
const paddingTop = parseInt(styles.paddingTop)
const paddingBottom = parseInt(styles.paddingBottom)
const borderTop = parseInt(styles.borderTopWidth)
const borderBottom = parseInt(styles.borderBottomWidth)
console.log(rect.height - paddingTop - paddingBottom - borderTop - borderBottom)
}).exec()
}2.通过给子元素和父元素都加上 box-sizing:border-box 样式来解决问题。
.container,
.content {
box-sizing: border-box;
margin: 10px;
padding: 20px;
}这里我们需要注意两点：
（1）box-sizing 样式需要加在两个元素身上。
（2）需要注意子元素和父元素之间的间隔是否有误。
结语
通过以上方法，我们可以解决 uniapp 获取 DOM 高度不准确的问题。请大家根据具体情况选择使用，希望本文能够对大家有所帮助。
