js获取页面元素位置的方法getBoundingClientRect()

最新推荐文章于 2021-05-24 20:14:46 发布
最新推荐文章于 2021-05-24 20:14:46 发布
阅读量680 收藏 1
点赞数
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x_xiNan9416/article/details/109082138
版权

getBoundingClientRect JavaScript 元素位置 布局 前端开发
关键词由CSDN通过智能技术生成

作用

getBoundingClientRect()是用来获取页面元素的位置的方法.这个方法最终返回的是一个矩形对象,包括四个属性:left,top,bottom,right

四个属性

  1. top：元素上边到视窗上边的距离;
  2. right：元素右边到视窗左边的距离;
  3. bottom：元素下边到视窗上边的距离;
  4. left：元素左边到视窗左边的距离;
  5. width:边界矩形的宽度(ie9)
  6. height:边界矩形的高度(ie9在这里插入图片描述
    )

注意：当我提到元素的边界矩形的时候，返回的大小包含了任何padding和border值。getBoundingClientRect()可以精确获取到保留小数点！

西楠
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js getBoundingClientRect() 来获取页面元素的位置
10-28
该方法已经不再是IE Only了，FF3.0+和Opera9.5+已经支持了该方法，可以说在获得页面元素位置上效率能有很大的提高，在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。
javascript 获取元素位置的快速方法 getBoundingClientRect()
10-29
总的来说，`getBoundingClientRect()`是JavaScript中一个非常实用的方法，它为开发者提供了一种高效、准确的方式来获取元素在网页中的位置信息，从而更好地控制和操作网页元素。在进行前端开发时，熟练掌握并灵活...
getBoundingClientRect()
makemyownlife
06-25 149
getBoundingClientRect() 来获取页面元素的位置   document.documentElement.getBoundingClientRect   下面这是MSDN的解释： Syntax oRect = object .getBoundingClientRect( ) Return Value Returns...
用getBoundingClientRect()来获取页面元素的位置
Dawn
04-16 799
以前绝大多数的使用下面的代码来获取页面元素的位置： var _x = 0, _y = 0; do{ _x += el.offsetLeft; _y += el.offsetTop; }while(el=el.offsetParent); return {x:_x,y:_y}; 这里有个”offsetParent”问题，所以要写很多兼容的代码，经过不懈的查找终于找到getBoun
获取元素在页面中位置 getBoundingClientRect()
weixin_30896825的博客
05-21 625
DOM 原生方法getBoundingClientRect（）获取元素相对视口位置 DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的 当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top和left属性...
js中getBoundingClientRect( )方法
stay_少年的博客
05-24 559
js中getBoundingClientRect( )方法 一.getBoundingClientRect() 解析 getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
JavaScript获取指定元素位置的方法
10-24
总的来说，理解和掌握这些JavaScript获取元素位置的方法对于前端开发是至关重要的。通过结合使用`getBoundingClientRect()`、`scrollLeft`、`scrollTop`和`offsetHeight`等属性，我们可以精确地定位页面上的任何元素...
Vue获取页面元素的相对位置的方法示例
10-15
总的来说，在Vue中获取页面元素的相对位置，通常需要结合`getBoundingClientRect()`、`offsetTop`等方法，以及事件监听来实现特定的交互效果。在实际开发中，还要考虑性能优化，例如使用`throttle`或`debounce`函数...
用JavaScript获取DOM元素位置和尺寸大小的方法
10-27
总之，理解和掌握JavaScript中的DOM元素位置和尺寸获取方法是Web开发中的基本技能，这对于创建交互式、响应式的网页至关重要。通过熟练运用这些属性和方法，开发者可以实现各种创新的效果，提升用户体验。
Javascript getBoundingClientRect()来获取元素在页面的位置
ssisse的博客
08-25 4996
语法EDIT rectObject = object.getBoundingClientRect(); 返回 返回值是一个DOMRect对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合 。 返回值是一个DOMRect对象，它包含了一组用于描述边框的只读属性——left、top、right和b
[JavaScript]获取元素位置的快速方法getBoundingClientRect()
王德封-逐浪
11-25 1700
 获取元素位置的快速方法--getBoundingClientRect()      有一种快速获得网页元素的位置。那就是使用getBoundingClientRect()方法。它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。所以，网页元素的相对位置就是　　var X=
js 滚动到顶部_获取dom到body左侧和顶部的距离，简单粗暴无bug-getBoundingClientRect...
weixin_39693193的博客
12-01 404
获取dom到body左侧和顶部的距离-getBoundingClientRect平时在写js的时候，偶尔会需要用js来获取当前div到 body 左侧、顶部的距离。网上查一查，有很多都是通过offsetTop、offsetLeft来计算出来的。我按照网上的查到的资料用了一次，算出来了一堆错误答案。下面我要分享的这个方法，兼容性很好（ie4都ok），而且很方便，不会算错。这个方法就是 getBoun...
getBoundingClientRect() 来获取页面元素的位置
weixin_30344131的博客
08-17 51
原文地址：http://www.cnblogs.com/qieqing/archive/2008/10/06/1304399.html 该方法获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。也不好理解，下面用图说明下。 该方法已经不再是IE Only了，FF3.0+和Opera9.5+已经支持了该方法，可以说在获得页面元素位置上效率能有很大的提高，在以前版本的O...
php获取元素位置,js获取元素位置（getBoundingClientRect()，scrollTop，scrollLeft）
weixin_42514752的博客
03-21 252
varele=document.querySelector('.TxtConBox');varrect=ele.getBoundingClientRect();varleft=rect.left+ele.scrollLeft;vartop1=document.body.clientHeight;varwidth=rect.width;varheight=r...
如何获取元素在屏幕中的坐标getBoundingClientRect（缩放时动态获取坐标）
weixin_40679578的博客
07-03 1886
我做的是在TRTC electron里面，有一个屏幕分享的功能，就只分享一个canvas画板出去，这就需要拿到整个屏幕中这个画板的起始坐标和宽高，从而获取到这个画板，如下图 坐标（x,y）就是这个画板在整个窗口的起始位置，然后知道画板的宽和高，就能拿到这个画板了，详情可参考canvas里的rect()方法，rect()详解 rect(x,y,w,h) ：x，y就是起始坐标，w，h就是宽和高。 并且rect（）可以动态设置坐标参数。 如果你也恰巧是要用TRTC electron，他的selectScreen
获取元素相对于视口的位置 Element.getBoundingClientRect() 理解及笔记
浅笑如伤的博客
06-01 3085
1、概念 Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。 2、语法 返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合，就是该元素的 CSS 边框大小。返回的结果是包含完整元素的最小矩形，并且拥有left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的只读属性用于描述整个边框。除了width 和 height 以外的属性是.
使用getBoundingClientRect高效获取页面元素位置
"本文档主要介绍了JavaScript中的`getBoundingClientRect()`方法，用于获取页面元素的位置信息。这个方法不再仅限于Internet Explorer，而是被Firefox 3.0+和Opera 9.5+等现代浏览器广泛支持，提高了获取元素位置的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值