element.getBoundingClientRect()

最新推荐文章于 2024-07-25 11:26:35 发布
最新推荐文章于 2024-07-25 11:26:35 发布
阅读量124 收藏
点赞数
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42192113/article/details/116494091
版权

该方法返回一个矩形对象，其中四个属性：left、top、right、bottom，分别表示元素各边与浏览器视窗上边和左边的距离，x、y表示左上角定点的坐标位置。

在这里插入图片描述
通过这个方法计算得出的left、top、right、bottom、x、y会随着视口区域内滚动操作而发生变化，如果你需要获得相对于整个网页左上角定位的属性值，那么只要给top、left属性值加上当前的滚动位置。

为了跨浏览器兼容，请使用 window.pageXOffset 和 window.pageYOffset 代替 window.scrollX 和 window.scrollY。

盼一族
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Element.getBoundingClientRect()
xuan的博客
08-01 463
Element.getBoundingClientRect() 方法返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。
getBoundingClientRect 方法详解
qq_45660256的博客
06-25 50
js中getBoundingClientRect的作用详解
Element.getBoundingClientRect的用法
weixin_43742121的博客
03-16 540
Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置 包括 width,height,x,y,top,left,right,bottom 语法 1、let rectObject = object.getBoundingClientRect(); 这样获取，获取到的是一个对象 2、如果想获取单个属性的值时，可用{}抱起来属性获取 let {widt...
093_Element.getBoundingClientRect()方法和DOMRect对象
aihiao的专栏
11-18 1064
1. Element.getBoundingClientRect() 1.1. Element.getBoundingClientRect()方法返回值是一个DOMRect对象, 对象拥有left, top, right, bottom, x, y, width和height这几个以像素为单位的只读属性, 用于描述整个边框。除了width和height以外的属性是相对于视图窗口的左上角来计算的。 2. DOMRect对象 2.1. 一个DOMRect代表一个矩形。DOMRect从其父类DOMRectR
Element.getBoundingClientRect()方法
祥哥的说
03-04 600
Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。 语法 rectObject = object.getBoundingClientRect(); 值 返回值是一个DOMRect对象，这个对象是由该元素的getClientRects()方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合 。 DOMRect 对...
Element.getBoundingClientRect返回元素的大小及其相对视口的位置
cecoal的博客
03-26 553
在工作的项目中使用的递归的方式获取当前元素的父元素的offsetTop（为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。）进行累加所得到当前元素相对于视口的高度。偶然发现js有个原生方法就是获取当前元素相对于相对于视口的位置即Element.getBoundingClientRect()，元素的尺寸等于width/height + padding + border-width的总和。，元素的的尺寸等于 width/height。
移动端（六） Element.getBoundingClientRect()
libufan的博客
07-13 528
语法 rectObject = object.getBoundingClientRect(); rectObject .left 表示元素的左边距离视口的左边的距离； rectObject .right 表示元素的右边距离视口的左边的距离 rectObject .top 表示元素的顶边距离视口顶边的距离 rectObject.bottom 表示元素的底部距离视口的顶边的距离 返回值是一个...
获取元素相对于视口的位置 Element.getBoundingClientRect() 理解及笔记
浅笑如伤的博客
06-01 3098
1、概念 Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。 2、语法 返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合，就是该元素的 CSS 边框大小。返回的结果是包含完整元素的最小矩形，并且拥有left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的只读属性用于描述整个边框。除了width 和 height 以外的属性是.
element.getBoundingClientRect().width/height VS. element.offsetWidth/offsetHeight VS. element.client...
weixin_30699443的博客
02-22 710
获得元素尺寸可谓多种多样，但通常它们是有一定区别的。 先说说元素的getBoundingClientRect()方法，这个方法的width或height属性可以计算元素尺寸，但width或height除了本身的content的宽高之外还包括padding和border的部分，这里不得不说的一个属性就是元素的offsetWidth和offsetHeight属性，这俩属性和getBoundingCl...
element.getBoundingClientRect();进行获取高度
Oliver_web的博客
05-30 2426
function getBoundingClientRect (element) { var rect = element.getBoundingClientRect(); // whether the IE version is lower than 11 var isIE = navigator.userAgent.indexOf('MSIE') != -1; //...
js getBoundingClientRect使用方法详解
01-19
Element.getBoundingClientRect() 含义： 方法返回元素的大小及其相对于视口的位置。 值： 返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的...
js getBoundingClientRect() 来获取页面元素的位置.docx
01-19
js getBoundingClientRect() 方法的语法为：element.getBoundingClientRect()，返回一个 TextRectangle 对象，该对象有四个整数属性（top、left、right 和 bottom），这些属性表示元素在客户端窗口中的坐标值，以...
javascript getBoundingClientRect() 来获取页面元素的位置的代码[修正版]第1/2页
10-29
var rect = element.getBoundingClientRect(); var X = rect.left + window.pageXOffset; var Y = rect.top + window.pageYOffset; ``` 这里的`window.pageXOffset`和`window.pageYOffset`分别代表水平和垂直方向上...
使用getBoundingClientRect方法实现简洁的sticky组件的方法
09-02
const targetRect = targetElement.getBoundingClientRect(); const stickyRect = stickyElement.getBoundingClientRect(); const stickyHeight = stickyRect.height; // 检查是否需要固定 if (targetRect.top...
javascript 获取元素位置的快速方法 getBoundingClientRect()
10-29
var elementRect = element.getBoundingClientRect(); var X = elementRect.left + window.pageXOffset; var Y = elementRect.top + window.pageYOffset; ``` 这里，`window.pageXOffset`和`window.pageYOffset`...
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3257
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
最新发布
xcLeigh
07-25 1824
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
【HTML — 构建网络】HTML 入门
07-24 1175
如果您查看许多其他站点的代码，您可能会遇到许多奇怪的标记样式，包括不带引号的属性值。在这一点上，你应该了解 HTML 是什么样子的，以及它在基本层面上是如何工作的。在 HTML 中，不需要在 void 元素标记的末尾添加 a，例如： .但是，它也是一种有效的语法，当您希望 HTML 是有效的 XML 时，您可以这样做。现在，您可以在 Web 浏览器中打开此文件，以查看呈现的代码的外观。在本练习中，您可以如前所述在计算机上本地编辑代码，也可以在下面的示例窗口中编辑代码（在本例中，可编辑示例窗口仅表示。
element.getBoundingClientRect( ）方法
11-18
`element.getBoundingClientRect()` 方法返回一个 `DOMRect` 对象，该对象提供了元素的大小及其相对于视口的位置。该方法返回的是一个矩形对象，包含了该元素的位置、大小等信息。该方法常用于获取元素的位置信息，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值