getBoundingClientRect()以及 getClientRects() 的区别

最新推荐文章于 2025-04-17 14:36:37 发布

原创最新推荐文章于 2025-04-17 14:36:37 发布 · 785 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #linq #safari

笔记专栏收录该内容

51 篇文章

订阅专栏

本文介绍了如何使用getBoundingClientRect()和getClientRects()方法来精确获取页面元素的位置信息和尺寸大小，这对于实现复杂的网页布局和交互效果非常有用。

getBoundingClientRect()

    <div id="box"></div>
var object=document.getElementById('box');  
rectObject = object.getBoundingClientRect();
 
    rectObject.top：元素上边到视窗上边的距离;
    rectObject.right：元素右边到视窗左边的距离;
    rectObject.bottom：元素下边到视窗上边的距离;
    rectObject.left：元素左边到视窗左边的距离;
    rectObject.width：是元素自身的宽
    rectObject.height是元素自身的高

getClientRects()

getClientRects() 返回一个TextRectangle集合，就是TextRectangleList对象。TextRectangle对象包含了, top, left, bottom, right, width, height六个属性。对于文本对象，W3C提供了一个TextRectangle对象，这个对象是对文本区域的一个解释。这里的文本区域只针对inline 元素，比如：a, span, em这类标签元素。getClientRects()常用于获取鼠标的位置，如放大镜效果。微博的用户信息卡也是通过改方法获得的。