offsetHeight、offsetWidth

offsetHeight、offsetWidth

offsetHeight网页可见区域高度 ，offsetWidth网页可见区域宽度
这两个属性是元素本身的，而不是style属性里面的，可以通过dom元素点的方式获取

offsetHeight由height、padding组成
offsetWidth 由width、padding 组成

实例

<template>
    <div>
     <div class="main" ref="aaa">
         11111111
         111111
         1111
         1111
         111
     </div>
    </div>
</template>

<script>
export default {
    mounted() {
      console.log(this.$refs.aaa.offsetHeight,this.$refs.aaa.offsetWidth)
    },
};
</script>

<style scoped lang="scss">
.main{
    width: 50px;
    padding: 0px 10px;
    height: auto;
    background: pink;
}
</style>

从控制台中可以看出：

• 不设置高度时，可以通过offsetHeight获取实际高度，但是你通过style的height属性是获取不到任何数据（宽度同高度一样）
• 可见宽度70=50（width）+ 20（padding）