getBoundingClientRect() 属性获取当前屏幕距离 `上下左右` 的坐标值

最新推荐文章于 2023-12-08 17:52:45 发布
最新推荐文章于 2023-12-08 17:52:45 发布
阅读量636 收藏
点赞数
分类专栏： js 文章标签： js方法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hc2018/article/details/84068626
版权

可以获取指定dom元素当前离屏幕指定方位的距离

<div id="div">我的坐标</div>

document.getElementById('div').getBoundingClientRect().top // 获取当前元素距离屏幕顶部的坐标值

document.getElementById('div').getBoundingClientRect().left // 获取当前元素距离屏幕最左边的坐标值

还有 getBoundingClientRect().right getBoundingClientRect().bottom

获取右边和下边的距离 按需来

hc2018
关注
专栏目录
getBoundingClientRect属性研究
csx blog
12-06 563
getBoundingClientRect 返回 width、height和下图中的6个属性抓住一个核心点，就是height、width的值：所以：在看源码时，经常看到兼容性IE低版本的写法，了解即可，比如看popper.js源码时：
Android 屏幕坐标
10-26
http://blog.csdn.net/csdnyuandaimaxuexi/article/details/49425861 博客地址：http://blog.csdn.net/csdnyuandaimaxuexi/article/details/49425861
屏幕取点软件 获取点坐标
04-21
可以获取屏幕上一点额坐标，可以下来看看，能准确获取一点的坐标！！！
getBoundingClientRect方法返回元素的大小及其相对于视口的位置
weixin_30378311的博客
09-03 253
Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。 语法 rectObject = object.getBoundingClientRect(); 值 返回值是一个DOMRect对象，这个对象是由该元素的getClientRects()方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合 。 DOMRect 对象...
Element.getBoundingClientRect()
qq_42931285的博客
04-23 1141
getBoundingClientRect scrollTop
getBoundingClientRect()
Della_UI的博客
05-19 1743
1、语法var rect=el.getBoundingClientRect();2、返回值返回一个包含left、top、right、bottom、width、height值的矩形对象。注： width和height：ie9及以上支持width/height属性。 兼容ie6~ie8的width/height的写法：return{ width:rect.right-rect.left,
获取元素距离浏览器周边的位置的方法getBoundingClientRect
09-08
在JavaScript中，`getBoundingClientRect()` 是一个非常实用的DOM元素方法，它允许开发者获取到一个元素相对于视口（浏览器窗口）的几何信息，包括元素的顶部、底部、左侧和右侧距离浏览器边缘的具体数值。...
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
01-21
this.$refs[‘通过设置ref获取到的dom元素’].getBoundingClientRect(); //示例: 获取元素距离顶部的距离 this.$refs.journalUpward.getBoundingClientRect().top 以上这篇vue获取元素宽、高、距离左边距离,右,上...
js getBoundingClientRect() 来获取页面元素的位置.docx
01-19
js 中的 getBoundingClientRect() 方法用于获取页面元素的位置信息，该方法可以获取元素相对于客户端窗口的 left、top、right 和 bottom 坐标值。 js getBoundingClientRect() 方法的语法为：element....
ele.getBoundingClientRect()使用
xiaojing的博客
01-24 1559
ele.getBoundingClientRect()是获取元素的大小以及相对于视口的位置。 执行该方法会获取到元素的width、height、top、left、right、bottom、x和y等属性。其中： y、top：是指元素上方距离视口上方的距离 x、left：是指元素左侧距离视口左侧的距离 right：是指元素右侧距离视口左侧的距离 bottom：是指元素下方距离视口上方的距离 ...
getClientRect和getBoundingClientRect获取节点的屏幕距离
weixin_30594001的博客
05-29 240
TextRectangle 对于文本对象，W3C提供了一个 TextRectangle 对象，这个对象是对文本区域的一个解释。 看下图(截图来源ppk): 一行连续的文本 我们可以获取到里面的5行文字，红色框就是TextRectangle这个抽象的对象. TextRectangle对象包含了, top left bottom left四个属性，这四个属性...
getBoundingClientRect() 方法练习
qq_42514643的博客
10-25 401
getBoundingClientRect() 实现购物车飞入案例 此案例结合了vue实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...
关于用js获取元素宽高及距离浏览器上下左右的方法！
weixin_43783614的博客
07-23 348
有时候我们没在css设置宽高，要获取动态加载数据及元素的宽高，会很难获取到， 今天在尝试用了一个方法getBoundingClientRect() var imgSVG=document.getElementById('zoom') console.log(imgSVG.getBoundingClientRect()) 然后我们来看下效果 这个方法挺好用的，希望对大家有所帮助！ ...
超详细分析！！！秒懂getBoundingClientRect()
weixin_61597234的博客
12-08 9011
作用：用来获取元素的位置以及大小相关的信息。是DOM元素的一个方法，返回一个DOMRect对象，包含元素的大小及其相对于视口的位置。bottom:元素底部距离......
Element.getBoundingClientRect返回元素的大小及其相对视口的位置
cecoal的博客
03-26 618
在工作的项目中使用的递归的方式获取当前元素的父元素的offsetTop（为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。）进行累加所得到当前元素相对于视口的高度。偶然发现js有个原生方法就是获取当前元素相对于相对于视口的位置即Element.getBoundingClientRect()，元素的尺寸等于width/height + padding + border-width的总和。，元素的的尺寸等于 width/height。
你真的会用getBoundingClientRect吗
魔侠的沙滩
03-04 1371
你真的会用getBoundingClientRect吗？ 左鹏飞 2017.09.20 本文介绍了什么是getBoundingClientRect；以及获取width,height的兼容性写法；最后介绍了两个使用场景：获取页面元素的位置和判断元素是否在可视区域。 1. 什么是getBoundingClientRect getBoundingClientRect用于获得页面中某个元素的左...
使用getBoundingClientRect()方法获取元素距离浏览器周边的位置
Ga Ga Love Front
04-16 2251
var box = document.getElementById( "gaga1" ); /* alert( box.getBoundingClientRect().top ); alert( box.getBoundingClientRect().right ); alert( box.getBoundingClientRect().bottom ); alert( box.getBoundi
TypeScript中使用getBoundingClientRect报错Property 'x' does not exist on type 'ClientRect | DOMRect
前端知识总结
05-08 1758
内容参考github ts问题11085 DomRect之前叫ClientRect，后来更名了1， ts兼容了两种对象，但ClientRect没有x,y属性。所以使用getBoundingClientRect时： ​let unspecifiedRect = document.body.getBoundingClientRect(); unspecifiedRect.x // fails let ...
getBoundingClientRect 相对于文档的距离
最新发布
04-12
以下是一个示例，演示如何使用getBoundingClientRect()方法获取元素相对于文档的距离： ```javascript var element = document.getElementById("myElement"); var rect = element.getBoundingClientRect(); ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值