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

本文介绍了在Vue中利用`this.$refs`结合`getBoundingClientRect()`方法获取元素的宽、高、距离边框的距离以及XY坐标轴的位置。示例展示了如何获取元素距离顶部的距离,并提供了相关屏幕和窗口信息的获取方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

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

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

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

时间: 2018-09-04

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

b8cf396acaffd96a5ccf980424896985.png

screen对象 获取屏幕的高宽(分辨率) screen.width //屏幕的宽 screen.height //屏幕的高 screen.availWidth //屏幕可用宽度 屏幕的像素高度减去系统部件高度之后的值 screen.availHeight //屏幕可用高度 屏幕的像素宽度减去系统部件宽度之后的值 window对象 获得窗口位置及大小 window.screenTop //窗口顶部距屏幕顶部的距离 window.screenLeft //窗口左侧距屏幕左侧的距离 window.i

Navigator 对象包含有关浏览器的信息: •appCodeName -- 浏览器代码名的字符串表示 •appName -- 官方浏览器名的字符串表示 •appVersion -- 浏览器版本信息的字符串表示 •cookieEnabled -- 如果启用cookie返回true,否则返回false •javaEnabled -- 如果启用java返回true,否则返回false •platform -- 浏览器所在计算机平台的字符串表示 •plugins -- 安装在浏览器中的插件数组 •t

使用ajax,通过会把服务器端响应获取到reponseText或者reponseXML中的信息,以某种方法动态的写到div和span标记中,这样,可以在无刷新的情况下,改变页面内容的显示. 通过javascript进行动态的修改,修改的方法有两种: 1. 一种是使用html的每个标记的innerHTML属性,使用此属性,只要为它提供一个有意义的html代码片段,那么html解释器就可以将其中的内容进行解释,并显示在页面上,使用这种方式比较简单,每次修改前不需要先把原来的内容清除掉,而可以直接进行

本文实例讲述了python获取元素在数组中索引号的方法.分享给大家供大家参考.具体如下: 这里python是通过index方法获取索引号的 li = ['a', 'b', 'new', 'D', 'z', 'example', 'new', 'two', 'elements'] print li.index("example") print li.index("new") print li.index("z") print "c&quo

需求 需要在整个app全局能够弹出弹框,接收到广播即进行处理. 但是,BaseActivity派生出N个Activity,BaseActivity中的广播就会执行N次,导致弹框重复添加,所有在广播中判定,只有在栈顶的Activity才能处理广播消息. 实现 获取任务栈 必须添加权限: 具体

JavaScript中提供获取HTML元素位置的属性: HTMLElement.offsetLeft HTMLElement.offsetHeight 但 是需要注意的是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其父元素位置的相对位置,也就是说这两个数值得到的是以其 父元素左上角为(0,0)点从而计算出的数值.那么如何得到一个HTML元素的绝对位置呢,可以用以下函数: 复制代码 代码如下: //获取元素的纵坐标 function getTop(e){ var o

使用js制作效果时,我们常常要获取某个元素在页面上的偏移量(例如tip提示框功能).而获取偏移量可以直接获取相对于document的偏移量,也可以获取相对与视口的偏移量(viewpoint)加上页面滚动量(scroll)获得. 1.获取相对与document的偏移量 function getOffsetSum(ele){ var top= 0,left=0; while(ele){ top+=ele.offsetTop; left+=ele.offsetLeft; ele=ele.offsetP

js 获取元素下面所有的li 复制代码 代码如下: var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li"); 或 复制代码 代码如下: var div=document.getElementById('a'); var ul

今天在开发源码一处发现有一处需要获取元素的相对位置高度,发现getBoundingClientRect有一个问题,它是用于获取某个元素相对于视窗的位置集合,达不到我想要的要求,如是看到阮老师写的一篇文章,关于用Javascript获取页面元素的位置,很好解决了我的我问题 发现问题 当我滚动到元素的位置时候,我想把元素固定在头部 // html 结构

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值