在使用 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 高度不准确的问题。请大家根据具体情况选择使用，希望本文能够对大家有所帮助。
以上就是uniapp怎么获取dom高度不准确的详细内容。