ele.getBoundingClientRect()使用

最新推荐文章于 2025-07-08 14:57:42 发布
最新推荐文章于 2025-07-08 14:57:42 发布
阅读量1.6k 收藏 3
点赞数 1
CC 4.0 BY-SA版权
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/shelbyandfxj/article/details/86629295
本文详细解析了ele.getBoundingClientRect()方法的功能，介绍了如何通过此方法获取元素的大小及在视口中的位置，包括width、height、top、left、right、bottom、x和y等属性。文章强调了这些坐标是相对于可视窗口而非内容窗口的特性。

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

ele.getBoundingClientRect()是获取元素的大小以及相对于视口的位置。

执行该方法会获取到元素的width、height、top、left、right、bottom、x和y等属性。其中：

y、top：是指元素上方距离视口上方的距离

x、left：是指元素左侧距离视口左侧的距离

right：是指元素右侧距离视口左侧的距离

bottom：是指元素下方距离视口上方的距离

下方为元素的位置视图：

在浏览器中获取body的相对窗口位置：

下图是当窗口没有法伤滚动时获取的body的位置

下面是发生滚动时body相对窗口的位置

由此可知，获取到的元素的位置时相对于可视窗口的，而不是内容窗口，此时top的绝对值应与父级窗口的scrollTop相同

vue 自定指令生成uuid,滚动监听tab表格吸顶,getBoundingClientRect()方法监听可视区的高度
周家大小姐
09-16 640
utils/index,.js /** * 生成UUID * @param withSeparator 是否有分割符 * @returns {string} */ export function generateUUID(withSeparator = true) { let d = new Date().getTime() if (window.performance && typeof window.performance.now === 'function'...
react里用js的getBoundingClientRect判断是否到达页面底部，从而加载更多或者加载下一页
weixin_45555234的博客
09-03 1217
项目中的订单列表需要用到订单的分页查询，默认加载第一页，滑到底部的时候，加载下一页的数据。所以用getBoundingClientRect来重写一下，之前都是用旧方法的，因为都是手机端的项目，所以暂时就不考虑兼容的问题了 1、容器添加 <div className="order-wrapper clearfix" ref="orderList"></div> 2、 ...
超详细分析！！！秒懂getBoundingClientRect()
weixin_61597234的博客
12-08 1万+
作用：用来获取元素的位置以及大小相关的信息。是DOM元素的一个方法，返回一个DOMRect对象，包含元素的大小及其相对于视口的位置。bottom:元素底部距离......
元素视图方法之getBoundingClientRect()方法详解
最新发布
qq_44741577的博客
07-08 175
getBoundingClientRect()是JavaScript中获取元素位置和尺寸的重要方法，返回元素相对于视口的坐标信息（x/y/width/height/top/right/bottom/left）。该方法兼容性良好，但需注意IE6/7的2px偏差和Firefox旧版本的限制。常用于拖拽、定位和响应式布局等场景，但要避免频繁调用以防性能问题。通过结合滚动事件，可以检测元素是否在可视区域内。
Element.getBoundingClientRect()
xuan的博客
08-01 608
Element.getBoundingClientRect() 方法返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。
getBoundingClientRect()
Della_UI的博客
05-19 1828
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,
import jsPDF from 'jspdf' import html2canvas from 'html2canvas' /* * 使用说明 * ele:需要导出pdf的容器元素(dom节点 不是id) * pdfFileName: 导出文件的名字 通过调用outPutPdfFn方法也可传参数改变 * splitClassName: 避免分段截断的类名 当pdf有多页时需要传入此参数 , 避免pdf分页时截断元素 如表格<tr class="itemClass"></tr> * 调用方式 先 let pdf = new PdfLoader(ele, 'pdf' ,'itemClass'); * 若想改变pdf名称 pdf.outPutPdfFn(fileName); outPutPdfFn方法返回一个promise 可以使用then方法处理pdf生成后的逻辑 * */ class PdfLoader { constructor(ele, pdfFileName, splitClassName) { console.log(ele) this.ele = ele this.pdfFileName = pdfFileName this.splitClassName = splitClassName this.A4_WIDTH = 595 this.A4_HEIGHT = 842 } async getPDF(resolve) { const ele = this.ele const pdfFileName = this.pdfFileName const eleW = ele.offsetWidth// 获得该容器的宽 const eleH = ele.scrollHeight// 获得该容器的高 const eleOffsetTop = ele.offsetTop// 获得该容器到文档顶部的距离 const eleOffsetLeft = ele.offsetLeft// 获得该容器到文档最左的距离 const canvas = document.createElement('canvas') let abs = 0 const win_in = document.documentElement.clientWidth || document.body.clientWidth// 获得当前可视窗口的宽度（不包含滚动条） const win_out = window.innerWidth// 获得当前窗口的宽度（包含滚动条） if (win_out > win_in) { abs = (win_out - win_in) / 2// 获得滚动条宽度的一半 } canvas.width = eleW * 2// 将画布宽&&高放大两倍 canvas.height = eleH * 2 const context = canvas.getContext('2d') context.scale(2, 2) // 增强图片清晰度 context.translate(-eleOffsetLeft - abs, -eleOffsetTop) html2canvas(ele, { useCORS: true// 允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。 }).then(async canvas => { const contentWidth = canvas.width const contentHeight = canvas.height // 一页pdf显示html页面生成的canvas高度; const pageHeight = (contentWidth / this.A4_WIDTH) * this.A4_HEIGHT // 这样写的目的在于保持宽高比例一致 pageHeight/canvas.width = a4纸高度/a4纸宽度// 宽度和canvas.width保持一致 // 未生成pdf的html页面高度 let leftHeight = contentHeight // 页面偏移 let position = 0 // a4纸的尺寸[595,842],单位像素，html页面生成的canvas在pdf中图片的宽高 const imgWidth = this.A4_WIDTH - 10 // -10为了页面有右边距 const imgHeight = (this.A4_WIDTH / contentWidth) * contentHeight const pageData = canvas.toDataURL('image/jpeg', 1.0) const pdf = jsPDF('', 'pt', 'a4') // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89) // 当内容未超过pdf一页显示的范围，无需分页 console.log(leftHeight) console.log(pageHeight) if (leftHeight < pageHeight) { // 在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示； pdf.addImage(pageData, 'JPEG', 5, 0, imgWidth, imgHeight) // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight); } else { // 分页 while (leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 5, position, imgWidth, imgHeight) leftHeight -= pageHeight position -= this.A4_HEIGHT // 避免添加空白页 if (leftHeight > 0) { pdf.addPage() } } } pdf.save(pdfFileName + '.pdf', { returnPromise: true }).then(() => { // 去除添加的空div 防止页面混乱 const doms = document.querySelectorAll('.emptyDiv') for (let i = 0; i < doms.length; i++) { doms[i].remove() } }) this.ele.style.height = '' resolve() }) } //此方法是防止（图表之类）内容因为A4纸张问题被截断 async outPutPdfFn(pdfFileName) { return new Promise((resolve, reject) => { this.ele.style.height = 'initial' pdfFileName ? this.pdfFileName = pdfFileName : null const target = this.ele const pageHeight = target.scrollWidth / this.A4_WIDTH * this.A4_HEIGHT if(this.splitClassName && this.splitClassName.length){ //判断是否有分页 // 获取分割dom，此处为class类名为item的dom const domList = document.getElementsByClassName(this.splitClassName) // 进行分割操作，当dom内容已超出a4的高度，则将该dom前插入一个空dom，把他挤下去，分割 let pageNum = 1 // pdf页数 const eleBounding = this.ele.getBoundingClientRect() for (let i = 0; i < domList.length; i++) { const node = domList[i] const bound = node.getBoundingClientRect() const offset2Ele = bound.top - eleBounding.top const currentPage = Math.ceil((bound.bottom - eleBounding.top) / pageHeight) // 当前元素应该在哪一页 if (pageNum < currentPage) { pageNum++ const divParent = domList[i].parentNode // 获取该div的父节点 const newNode = document.createElement('div') newNode.className = 'emptyDiv' newNode.style.background = 'white' newNode.style.height = (pageHeight * (pageNum - 1) - offset2Ele + 30) + 'px' // +30为了在换下一页时有顶部的边距 newNode.style.width = '100%' divParent.insertBefore(newNode, node) //在每一个节点前面插入一个空的新节点，防止内容被分割截断 } } } // 异步函数，导出成功后处理交互 this.getPDF(resolve, reject) }) } } export default PdfLoader 在这个的基础改
06-14
2.使用jsPDF将图片添加到PDF中，并分页。3.在每一页的底部添加页码。修改步骤：1.在每一页添加内容后，使用jsPDF的text方法添加页码。2.页码的位置通常放在页面底部中间。3.注意总页数的获取和当前页码的递增。根据...
ele getBoundingClientRect is not a function
03-27
解决方案：确认所使用的查询语句能够有效选取目标节点。 ```javascript const element = document.querySelector('#exampleElement'); if (element) { console.log(element.getBoundingClientRect()); } else ...
page.actions.move_to(ele, duration=0.5).hold().move(200, random.uniform(-5, 5), duration=0.1).move(100, random.uniform(-5, 5), duration=0.5).release()
04-01
### 使用 Puppeteer 实现页面动作链中的元素移动和随机偏移 在 Puppeteer 中，虽然官方并未提供类似于 Selenium 的 `ActionChains` 功能来直接模拟复杂的鼠标操作（如拖拽、按住并释放等），但可以通过组合使用 ...
JavaScript与JQUERY获取元素的宽、高和位置
01-21
ele.getBoundingClientRect()：获取一个元素相对于浏览器视口的的坐标（无论父元素定位与否），返回一个Object对象，该对象有6个属性：top/left/right/bottom/width/height。几乎所有浏览器都支持该方法。jQuery中...
getBoundingClientRect方法返回元素的大小及其相对于视口的位置
weixin_30378311的博客
09-03 286
Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。 语法 rectObject = object.getBoundingClientRect(); 值 返回值是一个DOMRect对象，这个对象是由该元素的getClientRects()方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合 。 DOMRect 对象...
Element.getBoundingClientRect的用法
weixin_43742121的博客
03-16 619
Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置 包括 width,height,x,y,top,left,right,bottom 语法 1、let rectObject = object.getBoundingClientRect(); 这样获取，获取到的是一个对象 2、如果想获取单个属性的值时，可用{}抱起来属性获取 let {widt...
JS | 元素视图方法之getBoundingClientRect()方法详解，秒懂！
青春木鱼的博客
10-16 7878
在前端开发过程中，我们经常需要获取HTML元素的尺寸和位置信息。getBoundingClientRect()方法就是一个非常重要的工具，它可以帮助我们获取元素的大小及其相对于视口的位置。
js中getBoundingClientRect()方法详解
热门推荐
juzipchy的博客
06-07 3万+
getBoundingClientRect获取元素位置 getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。 getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。 该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height； 这里的t
getBoundingClientRect使用指南
dijiangui5341的博客
07-15 572
getBoundingClientRect使用指南 author: @TiffanysBear 主要介绍getBoundingClientRect的基本属性，以及具体的使用场景和一些需要注意的问题。 getBoundingClientRect Element.getBoundingClientRect() 含义： 方法返回元素的大小及其相对于视口的位置。 值： 返回值是一个 DOM...
image: ele.url.slice(ele.url.indexOf("/xgcsdn")), width: ele.poiWid, height: ele.poiHig,
04-01
### 动态设置图片路径及其宽高 为了实现从对象的 `url` 属性中提取图像路径并动态设置其宽度和高度，可以通过以下方法完成： #### 1....假设有一个对象包含 `url` 属性，该属性指向一个完整的 URL 地址。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值