淘先锋技术网

首页 1 2 3 4 5 6 7

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()方式设置（没试过~）