精华内容
下载资源
问答
  • vue获取dom元素动态宽高
    千次阅读
    2021-12-25 09:25:10

    一、获取元素

    1、this.$refs

    2、document.querySelector()  document.getElementById() document.getElementByTagName()等等

    确保获取到的元素不是undefined或null

    vue中,在mounted()生命周期函数中才能获取dom元素,建议在修改样式时加个定时器,或者将代码放入 $nextTick()中执行。

    二、获取元素的宽高

    1、如果是内嵌样式 style="width:100px,height:100px;"

    可以通过以下两种方法获取宽高:

    this.$refs.ele.style.width / this.$refs.ele.style.height   获取的是字符串且带单位,如:"100px"

    this.$refs.ele.offsetWidth  /this.$refs.ele.offsetHeight 获取的是字符串且无单位,,如:'100'

    2、如果非内嵌样式,即样式写在样式表里面:

    只能通过以下方式获取宽高:

    this.$refs.ele.offsetWidth  /this.$refs.ele.offsetHeight 获取的是字符串且无单位,,如:'100'

    三、给元素宽 高赋值:

    1、offsetWidth / offsetHeight 是只读属性,不能赋值;

    2、可以通过以下方式赋值:

    this.$refs.ele.style.width = "100px";  //记得带单位

    this.$refs.ele.style.height= "100px"; //记得带单位

    四、getComputedStyle API

    window.getComputedStyle(this.$refs.ele).width;

    window.getComputedStyle(this.$refs.ele).height;

    五、通过setAttribute来设置属性

    this.$refs.ele.setAttribute('style','height:1000px');

    this.$refs.ele.setAttribute('style','height:1000px');

     

    更多相关内容
  • 原因:重置数据后获取dom元素宽高时,dom元素还未渲染完毕; 解决方法:利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后...
  • vue3之vue3.2获取dom元素宽高

    千次阅读 2022-07-01 10:54:10
    vue3.2获取dom元素宽高

    知识点:ref,nextTike

    • ref可以用于dom对象的获取,以及创建一个响应式的普通对象类型

    • nextTick是一个函数,它接受一个函数作为参数,nextTick官网定义是‘将回调推迟到下一个 DOM 更新周期之后执行’,

    未使用nextTike

    <!--
     * new page
     * @author: Blaine
     * @since: 2022-06-30
     * page_nextTike.vue
    -->
    <template>
      <div class="container" >
        <ul ref="myRef">
          <li v-for="(item, index) in pepleList" :key="index">{{ item }}</li>
        </ul>
        <button @click="addHandle">增加</button>
      </div>
    </template>
    
    <script setup lang="ts">
    import { onMounted, reactive, ref, nextTick } from 'vue'
    let pepleList = reactive<string[]>(['蜘蛛侠', '钢铁侠', '美国队长'])
    const myRef = ref<HTMLElement>();
    onMounted(() => {
      console.log('列表的高度是:', myRef.value?.clientHeight)
    })
    const addHandle =  async() => {
      pepleList.push('闪电侠')
      // await nextTick()
      console.log('列表的高度是:', myRef.value?.clientHeight)
    }
    </script>
    
    <style scoped>
    </style>
    
    

    请添加图片描述

    **注意:**这里的list并没有立即增加
    问题在于我们改变list的值时,vue并不是立刻去更新dom,而是在一个事件循环最后再去更新dom,这样可以避免不必要的计算和dom操作,对提高性能非常重要。那么我们需要在dom更新完成后,再去获取ul的高度,这时候就需要用到nextTick了,

    使用ref+nextTick

    <!--
     * new page
     * @author: Blaine
     * @since: 2022-06-30
     * page_nextTike.vue
    -->
    <template>
      <div class="container" >
        <ul ref="myRef">
          <li v-for="(item, index) in pepleList" :key="index">{{ item }}</li>
        </ul>
        <button @click="addHandle">增加</button>
      </div>
    </template>
    
    <script setup lang="ts">
    import { onMounted, reactive, ref, nextTick } from 'vue'
    let pepleList = reactive<string[]>(['蜘蛛侠', '钢铁侠', '美国队长'])
    const myRef = ref<HTMLElement>();
    onMounted(() => {
      console.log('列表的高度是:', myRef.value?.clientHeight)
    })
    const addHandle =  async() => {
      pepleList.push('闪电侠')
      await nextTick()
      console.log('列表的高度是:', myRef.value?.clientHeight)
    }
    </script>
    
    <style scoped>
    </style>
    
    

    请添加图片描述

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

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

    Vue && DOM

    一、获取元素

    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. 使用 offsetWidthoffsetHeight 方法,返回 Number 类型的值,如:52
    let $ele = this.$refs.wrap
    // 宽
    let width = $ele.offsetWidth
    // 高
    let height = $ele.offsetHeight
    
    1. 使用 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元素并设置属性的两种实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本篇文章主要介绍了Vue获取DOM元素样式和样式更改示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本篇文章主要介绍了在vue获取dom元素内容的方法,可以通过给标签加ref属性,这里整理了详细的代码,有兴趣的可以了解一下
  • vue获取dom元素宽高

    2021-01-30 13:29:38
    // 元素上加上ref在mounted写 因为我是html标签可以不用加el(如果是html标签就不用加)this.$refs.tooltipRef.offsetWidththis.$refs.tooltipRef.$el.offsetWidth建议在this.$nextTick写this.$nextTick(() =>...

    // 元素上加上ref

    在mounted写 因为我是html标签可以不用加

    math?formula=el%EF%BC%8C%E5%A6%82%E6%9E%9C%E6%98%AF%E5%83%8Felementui%E5%88%86%E8%A3%85%E7%9A%84%E5%85%83%E7%B4%A0%E5%B0%B1%E8%A6%81%E5%8A%A0%E4%B8%80%E4%B8%AAel(如果是html标签就不用加)

    this.$refs.tooltipRef.offsetWidth

    this.$refs.tooltipRef.$el.offsetWidth

    建议在this.$nextTick写

    this.$nextTick(() => {

    console.log(this.$refs.tooltipRef.offsetWidth)

    })

    offsetWidth //返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)

    offsetHeight //返回元素的高度(包括元素高度、内边距和边框,不包括外边距)

    clientWidth //返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)

    clientHeight //返回元素的高度(包括元素高度、内边距,不包括边框和外边距)

    style.width //返回元素的宽度(包括元素宽度,不包括内边距、边框和外边距)

    style.height //返回元素的高度(包括元素高度,不包括内边距、边框和外边距)

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

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

    展开全文
  • 今天小编就为大家分享一篇vue获取元素宽、距离左边距离,右,上距离等还有XY坐标轴的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • https://www.jianshu.com/p/371659eb1fe3 //获取table的宽度 :style="'width:'+dataWidths+'px'" letdataWidth=this.$refs.tab1.offsetWidth;//offsetHeight
  • 主要给大家介绍了关于vue操作dom元素的3种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue获取dom元素高度的方法

    千次阅读 2021-09-03 16:17:41
    要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mounted() { let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //浏览器高度...
  • 主要介绍了vue获取dom元素注意事项及vue获取dom元素的内容,需要的朋友可以参考下
  • 本篇文章主要介绍了详解在Vue中通过自定义指令获取dom元素 ,具有一定的参考价值,有兴趣的可以了解一下。
  • vue获取dom宽度高度

    2021-06-02 16:04:43
    console.log('宽度') console.log(this.$refs['dialogForm'].$el.clientWidth) console.log('高度') console.log(this.$refs['dialogForm'].$el.clientHeight)
  • 一、获取dom元素节点 为元素添加一个ref属性 该属性的值可任取 以作为该节点的引用名 ref即为reference(引用)的前三个字母 This is title This is content 用Vue实例中的自带的$refs属性获取元素 用预先定义好的...
  • vue 获取dom高度

    2022-05-24 01:36:12
    vue
  • vue获取dom元素内容

    千次阅读 2020-12-19 16:54:35
    通过ref来获取dom元素vue官网上对ref的解释ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向...
  • Vue动态设置Dom元素宽高

    千次阅读 2020-12-20 18:31:12
    需求:slider侧边栏是宽度是动态的,使用jquery可以操作dom元素,设置宽高,但vue是避免操作dom的Hamyexport default{name:'index',data(){return{sliderStyle:{width:'240px'}}}}思路:通过给元素绑定style,在...
  • vue项目获取dom元素宽高总是不准确

    千次阅读 2020-01-15 16:26:39
    dom元素内部内容是动态的,重置数据...原因:重置数据后获取dom元素宽高时,dom元素还未渲染完毕; 解决方法:利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vu...
  • 文章目录Vue获取组件元素ref获取组件元素 Vue获取组件元素 如果想使用哪个DOM元素,就给它加上ref属性,然后用$refs属性获取它的...Vue获取DOM元素的方法</title> </head> <body> <div id="ap
  • 八.vue获取dom元素

    2020-11-12 20:13:39
    vue获取dom元素 方法一:直接给相应的元素加id,然后再document.getElementById(“id”);获取,然后设置相应属性或样式 方法二:使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素 例 <div ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 45,081
精华内容 18,032
关键字:

vue获取dom元素动态宽高