Vue获取元素的宽高

  1. 获取元素
    第一种:this.$refs
    第二种:document.querySelector()等等
    首先确保获取的元素不是undefined 或 null 等等
    元素得在mounted()生命周期内才获取得到
    建议在修改样式外面加个定时器,保证页面已经渲染完毕~只要遇到定时器就会把定时器放到代码最下面,最后再执行,而不是去等待。即使时间为0;

  2. 获取元素的宽、高
    (1)如果你元素有内联样式style=“width:100px;height:100px;”
    则可以通过以下方式获取宽,高
    this.$refs.名称.style.width 或 this.$refs.名称.offsetWidth
    this.$refs.名称.style.height 或 this.$refs.名称.offsetHeight
    tips:前者获取的是字符串且带单位,后者无单位
    (2)如果你元素没有内联样式或者宽高是写在style标签内的,即在样式表里的。
    则只能通过以下这种方式获取:
    this.$refs.名称.offsetWidth
    this.$refs.名称.offsetHeight

  3. 给元素宽,高赋值
    (1) offsetWidth 与 offsetHeight 只读,所以不能给这两个属性赋值
    (2)可以通过以下方式赋值
    this.$refs.名称.style.width=""
    this.$refs.名称.style.height=""
    注意:!!!
    元素内联样式的style的width和height的值是字符串,而且有单位!所以可能会存在因为少了单位而赋值失效问题!(我遇到过!!!)
    this.$refs.名称1.style.width = this.$refs.名称2.offsetWidth + ‘px’
    this.$refs.名称1.style.height = this.$refs.名称2.offsetHeight + ‘px’

  4. getComputedStyle API
    window.getComputedStyle(this.$refs.名称).width;
    window.getComputedStyle(this.$refs.名称).height;

  5. 元素本身有width、height属性!
    应该可以通过setAttribute()方式设置(没试过~)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值