vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法

this.$refs['通过设置ref获取到的dom元素'].getBoundingClientRect();

//示例: 获取元素距离顶部的距离

this.$refs.journalUpward.getBoundingClientRect().top

以上这篇vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 获取元素距离浏览器周边的位置的方法getBoundingClientRect

    复制代码 代码如下: var box = document.getElementById( "gaga1" ); /* alert( box.getBoundingClientRect().top ); alert( box.getBoundingClientRect().right ); alert( box.getBoundingClientRect().bottom ); alert( box.getBoundingClientRect().left ) */ function

  • vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法

    this.$refs['通过设置ref获取到的dom元素'].getBoundingClientRect(); //示例: 获取元素距离顶部的距离 this.$refs.journalUpward.getBoundingClientRect().top 以上这篇vue获取元素宽.高.距离左边距离,右,上距离等还有XY坐标轴的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 微信小程序实现动态获取元素宽高的方法分析

    微信小程序实现动态获取元素宽高的方法分析

    本文实例讲述了微信小程序实现动态获取元素宽高的方法.分享给大家供大家参考,具体如下: 我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用呢? 首先,这个接口会返回一个对象实例. var obj=wx.createSelectorQuery(); 下面的就是返回的对象实例 obj 的所有内容. 返回的 obj 有五个方法: 1.  obj.in(co

  • uni-app 组件里面获取元素宽高的实现

    遇到的问题:直接在组件的mounted里面创建选择器,获取元素的宽高,即使扔到定时器里面执行,还是偶尔会有获取不到的情况 解决办法: // 写法一: getDescBox() { uni.createSelectorQuery().in(this).select('.top .desc').boundingClientRect(result => { if (result) { console.log('==========',result) }else { this.getDescBox();

  • 解决vue项目获取dom元素宽高总是不准确问题

    dom元素内部内容是动态的,重置数据后直接获取宽高总是不准确: this.$refs.editor[0].offsetHeight; 原因:重置数据后获取dom元素宽高时,dom元素还未渲染完毕: 解决方法:利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调 补充知识:vue 获取 指定元素的高度宽度等(

  • js获取隐藏元素宽高的实现方法

    网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>test</title> </head> <bo

  • 各情景下元素宽高的获取实现代码

    情景一,元素style属性设置了width/height 复制代码 代码如下: <div style="width:100px;">test<div> <script> var div = document.getElementsByTagName('div')[0]; alert(div.style.width); </script> 如上,使用el.style.width即可.如果没有在style属性中设置width,那么使用el.s

  • javascript获取网页宽高方法汇总

    document.body.clientWidth - 网页可见区域宽 document.body.clientHeight - 网页可见区域高 document.body.offsetWidth - 网页可见区域宽,包括边线和滚动条的宽 document.body.offsetHeight - 网页可见区域高,包括边线和滚动条的高[FF,chrom下是整个页面高,IE opera 下正常] document.body.scrollWidth - 网页总宽 document.body.scrol

  • vue-preview动态获取图片宽高并增加旋转功能的实现

    vue-preview是一个常用的图片查看器,微博网页版就是用的这个插件: 我在项目中也用过这个插件,总体来说,还是比较满意.但是缺少一个图片旋转功能. 安装使用 第一步:安装 npm i vue-preview -S 第二步:引用配置 import VuePreview from 'vue-preview' Vue.use(VuePreview) Vue.use(preview, { mainClass: 'pswp--minimal--dark', barsSize: {top: 0, bo

  • js获取图片宽高的方法

    js获取图片宽高的方法

    本文分享多种js获取图片宽高的方法,并且通过实例进行分析,希望大家从中有所收获. 一.简陋的获取图片方式 // 图片地址 后面加时间戳是为了避免缓存 var img_url = 'upload/2013/13643608813441.jpg?'+Date.parse(new Date()); // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 打印 alert('width:'+img.width+',height:'

  • Android编程获取屏幕宽高与获取控件宽高的方法

    本文实例讲述了Android编程获取屏幕宽高与获取控件宽高的方法.分享给大家供大家参考,具体如下: 获取屏幕宽高 // 获取屏幕宽高(方法1) int screenWidth = getWindowManager().getDefaultDisplay().getWidth(); // 屏幕宽(像素,如:480px) int screenHeight = getWindowManager().getDefaultDisplay().getHeight(); // 屏幕高(像素,如:800p) L

随机推荐