js中的getBoundingClientRect()函数

最新推荐文章于 2024-03-30 11:17:31 发布
最新推荐文章于 2024-03-30 11:17:31 发布
阅读量283 收藏
点赞数
原文链接：http://www.cnblogs.com/weiyinfu/p/8478122.html
版权

在Chrome上，此函数返回结果包含x,y，它们的取值对应于left，top。但是x，y这种表示方式非常不直观（需要先理解x轴和y轴的方向），而left，top则清晰无歧义地表达了元素的位置。正是因此，w3c标准中鼓励与界面相关的坐标多多使用left，top，尽量少用x，y。

转载于:https://www.cnblogs.com/weiyinfu/p/8478122.html

dejing6575
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在JavaScript中遭遇级联表达式陷阱
10-31
在 JavaScript 中，级联表达式是一种常用的编程技术，允许开发者通过链式调用多个方法或函数，使代码看起来更加简洁和优雅。但是，如果不当使用级联表达式，可能会导致代码难以理解和Debug。 级联表达式的优点在于...
详解原生js实现offset方法
12-02
在为 jTool 提供 offset (获取当前节点位置）方法时， 先后使用了两种方式进行实现， 现整理出来以作记录。 前后共使用了两种方式实现了... // 递归获取 offset, 可以考虑使用 getBoundingClientRect function getOff
js中getBoundingClientRect()方法详解
m0_59075169的博客
05-10 6256
js中getBoundingClientRect()方法详解
getBoundingClientRect说明
weixin_30312659的博客
08-15 196
getBoundingClientRect用于获取某个元素相对于视窗的位置集合。 1.语法：这个方法没有参数。 rectObject = object.getBoundingClientRect() 2.返回值类型：TextRectangle对象，每个矩形具有四个整数性质（ 上， 右 ， 下，和左 ）表示的坐标的矩形，以像素为单位。 　rectObject.top：元素上边到视窗...
【日常记录】【JS】getBoundingClientRect 获取元素位置和大小
最新发布
呆呆狗
03-30 880
getBoundingClientRect() 是一个用于获取元素位置和大小的方法。它返回一个 DOMRect对象，其提供了元素的大小及其相对于视口的位置，
getBoundingClientRect()
前端说
03-31 662
console.log(this.getBoundingClientRect()) console.log(this.getClientRects()['0']) //ClientRect {top: 356, right: 37.625, bottom: 377, left: 8, width: 29.625…} //ClientRect {top: 356, right: 37.625, bot
js中getBoundingClientRect()
weixin_42428527的博客
09-17 346
getBoundingClientRect()方法获取元素相对于浏览器视窗的位置，无论有没有父元素，这个方法获取到的都是相对视窗的，返回值是一个对象； DOMRect {x: 110, y: 110, width: 202, height: 202, top: 110,right:312,left:110,bottom:302}; 这里的width,height都是元素的宽高，top，righ...
getBoundingClientRect详解
weixin_34123613的博客
08-31 334
getBoundingClientRect获取的left和top始终是该元素相对于页面原点坐标的位置，当它大于原点坐标则为正数，等于原点坐标为零，小于为负数。 转载于:https://www.cnblogs.com/gongshunkai/p/5826527.html...
js使用小技巧
07-11
取变量类型 typeof($js_libpath) == "undefined" 下拉框 下拉框.options[索引] 下拉框.options.length 查找对象 document.getElementsByName("r1"); document.getElementById(id); 定时 timer=setInterval...
js获取页面控件坐标.pdf
09-27
在该函数中，我们使用了两个变量 w 和 h 来累加每个父元素的 offsetLeft 和 offsetTop 属性的值，最后 alert 出该元素相对于文档的坐标。这只是一个简单的示例代码，实际上我们可以根据需要对其进行修改和扩展。 ...
原生javascript实现图片滚动、延时加载功能
12-09
　img.getBoundingClientRect().top + document.body.scrollTop||document.documentElement.scrollTop （3）判断img出现的位置是否在可见区域里: 　.在浏览器的可见区域，justTop>scrollTop&&offsetTop<...
用getBoundingClientRect()来获取页面元素的位置
weixin_33845477的博客
09-24 81
以前绝大多数的使用下面的代码来获取页面元素的位置： view source print? 1.var _x = 0, _y = 0; 2.do{ 3._x += el.offsetLeft; 4._y += el.offsetTop; 5.}while(el=el.offsetParent); 6.return {x:_x,y:_y}; 这里有个”...
getBoundingClientRect
qq_38340907的博客
11-26 524
getBoundingClientRect() 获取元素距离窗口的位置，得到的是一个对象 getBoundingClientRect().top getBoundingClientRect().right getBoundingClientRect().bottom getBoundingClientRect().left getBoundingClientRect().width getBoun...
getBoundingClientRect（）
道路是曲折的，前途是光明的
09-08 850
一、getBoundingClientRect（），元素到可视区的距离 主要是在ie下有个2像素的差别。可以封装一个函数：function GetRect(element){ var rect=element.getBoundingClientRect(); var top=document.documentElement.clientTop; //非ie是0，ie是2；
getClientRects 和 getBoundingClientRect 的用法和区别
热门推荐
freshlover的专栏
05-28 5万+
getClientRects获取元素占据页面的所有矩形区域 描述 获取元素占据页面的所有矩形区域。 语法     var rectCollection = object.getClientRects(); 值 getClientRects 返回一个TextRectangle集合，就是TextRectangleList对象。TextRectangle对象包含了, top
javascript中的getBoundingClientRect()方法
沐雨橙风ιε的博客
09-04 305
javascript中的getBoundingClientRect()方法
JavaScript中的getBoundingClientRect()的含义
sumimg的博客
09-28 946
JavaScript中的getBoundingClientRect() getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。getBoundingClientRect()是DOM元素到浏览器可视范围的距离（不包含页面看不见的部分）。该函数返回一个Object对象，该对象有6个属性：top, left, bottom, right, width, height；这里的top、left和css中的理解很相似，width、height是元素自身的宽高，但是
getBoundingClientRect() 的用法
diligentkong的博客
07-30 8382
getBoundingClientRect()方法用来获取页面中某个元素的左、上、右、下分别相对浏览器视窗的位置，返回的是一个矩形对象，包括四个属性，分别是left 、top、right、bottom。分别表示元素各边与页面上边和左边的距离。 来看个例子：<style> *{ margin: 0; padding: 0;
getBoundingClientRect使用指南
dijiangui5341的博客
07-15 462
getBoundingClientRect使用指南 author: @TiffanysBear 主要介绍getBoundingClientRect的基本属性，以及具体的使用场景和一些需要注意的问题。 getBoundingClientRect Element.getBoundingClientRect() 含义： 方法返回元素的大小及其相对于视口的位置。 值： 返回值是一个 DOM...
vue中使用getBoundingClientRect
09-03
在Vue中使用`getBoundingClientRect`函数可以获取元素的位置和尺寸信息。你可以在Vue的方法中调用`getBoundingClientRect`函数来获取元素的边界信息。 首先，确保你有一个元素的引用，可以通过`ref`属性来获取它。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值