在Vue中获取DOM元素的实际宽高

Posted 2023-03-28 天問_

最近使用 D3.js 开发可视化图表，因为移动端做了 rem 适配，所以需要动态计算获取图表容器的宽高，其中涉及到一些原生DOM API的使用，避免遗忘这里总结一下。

一、获取元素

在 Vue 中可以使用 ref 来获取一个真实的 DOM 元素。
为了保险起见，所有的 DOM 操作建议都放在 $nextTick() 方法中。

<template>
  <div class="box" ref="wrap"></div>
</template>
<script>
export default 
  mounted() 
    // 获取 DOM 元素
    this.$nextTick(()=>
      let $ele = this.$refs.wrap
    )
  ,

</script>
<style scoped>
  .box 
    width: 100%;
    height: 200px;
    background-color: pink;
  
</style>

二、获取元素宽高

1. 使用 offsetWidth 、 offsetHeight 方法，返回 Number 类型的值，如：52。

let $ele = this.$refs.wrap
// 宽
let width = $ele.offsetWidth
// 高
let height = $ele.offsetHeight

2. 使用 window 全局对象中的 getComputedStyle API，返回 String 类型的值，包含px单位，如： '100px'。

let $ele = this.$refs.wrap
// 宽
let width = window.getComputedStyle($ele).width
// 高
let height = window.getComputedStyle($ele).height

---

欢迎访问：天问博客

vue获取dom元素的宽高

参考技术A 在mounted写 因为我是html标签可以不用加 el(如果是html标签就不用加)

offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）

offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）

clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）

clientHeight //返回元素的高度（包括元素高度、内边距，不包括边框和外边距）

style.width //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）

style.height //返回元素的高度（包括元素高度，不包括内边距、边框和外边距）

scrollWidth //返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同

scrollHeigh //返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同