vue 获取元素高度为什么会有偏差

Question

<div class="">
    <div class="item">海南省</div>
    <div class="item picker-active">重庆市</div>
</div>

this.$nextTick(()=>{
    document.getElementsByClassName('picker-active')[0].offsetHeight
})

.picker-items{height:calc(358px - 45px);overflow-y: auto;}
.picker-items .item{position: relative;height:44px;line-height:44px;padding:0 24px;font-size:14px;color:#999;overflow: hidden;}
.picker-items .item:after{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;background: #f5f5f5;}

为什么有时候是48，有时候是49

Answer 1

offsetleft、offsettop、offsetwidth、offsetheight，这四个函数最终获取的均为整数
所以你这个区的时候，在计算取整时出现了不一样。

Answer 2

获取高度的代码写在了this.$nextTick回调中，你的输出输出了五次，也就是页面更新了五次，我想知道你这五次都是怎么触发页面更新的呢？

把document.getElementsByClassName('picker-active')[0]打印出来看看，是不是同一个对象。

---

<div id="app">
  <div class="picker-items">
    <template v-for="item in items">
      <div class="item"  @click="select(item.index)">
        {{item.name}}
      </div>
    </template>
  </div>
</div>
<script src="vue.js"type="text/javascript" charset="utf-8"></script>

<script>
  let vm = new Vue({
    el: '#app',
    data: {
      items: [
        {'index':0,'name':'海南0'},
        {'index':1,'name':'海南1'},
        {'index':2,'name':'海南2'},
        {'index':3,'name':'海南3'},
        {'index':4,'name':'海南4'},
        {'index':5,'name':'海南5'},
        {'index':6,'name':'海南6'},
        {'index':7,'name':'海南7'},
        {'index':8,'name':'海南8'},
        {'index':9,'name':'海南9'},
        {'index':10,'name':'海南10'},
      ]
    },
    mounted () {
      // this.$nextTick(()=>{
      //   console.log(document.getElementsByClassName('picker-active')[0].offsetHeight)          
      // })
    },
    methods: {
      select(index){
        console.log(document.getElementsByClassName('item')[index].offsetHeight)          
      }
    }
  })
</script>
<style>
.picker-items{
  height:calc(358px - 45px);
  overflow-y: auto;
  border: 1px solid red;
}
.picker-items .item{
  position: relative;
  height:44px;
  line-height:44px;
  padding:0 24px;
  font-size:14px;color:#999;
  overflow: hidden;
  cursor: pointer;
}
.picker-items .item:after{ 
  content: ""; 
  position: absolute; 
  left: 0; 
  bottom: 0; 
  width: 100%; 
  height: 1px;
  background: #f5f5f5;
}
</style>