Javascript getBoundingClientRect()来获取元素在页面的位置

最新推荐文章于 2024-06-25 16:36:22 发布

ssisse

最新推荐文章于 2024-06-25 16:36:22 发布

阅读量5k

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

99 篇文章 2 订阅

订阅专栏

语法EDIT

rectObject = object.getBoundingClientRect();

返回值是一个DOMRect对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合。

返回值是一个DOMRect对象，它包含了一组用于描述边框的只读属性——left、top、right和bottom，属性单位为像素，top和left的属性值是相对于视口的top-left（上、左）位置而言的。

还是实际解释下，该方法获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。下面用图说明下。

注意: Gecko 1.9.1 给DOMRect对象添加了width和height属性，在IE8或者更低浏览器版本中，getBoudingClientRect()方法返回的TextRectangle对象没有height和width属性。同时，额外的属性（包括height和width）也不能添加到TextRectangle对象中去。

空边框盒（没有内容的边框）会被忽略。如果所有的元素边框都是空边框，那么这个矩形给该元素返回的width、height值为0，left、top值为第一个css盒子（按内容顺序）的top-left值。

当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。如果不希望属性值随视口变化，那么只要给top、left属性值加上当前的滚动位置（通过window.scrollX和window.scrollY），这样就可以获取与当前的滚动位置无关的常量值。

为了跨浏览器兼容，请使用window.pageXOffset和window.pageYOffset代替window.scrollX 和 window.scrollY，当window.pageXOffset, window.pageYOffset, window.scrollX and window.scrollY未定义时, 使用

(((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft and (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop

例子

var box=document.getElementById('box'); // 获取元素
alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离
alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离
alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离
alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离

转自：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

http://www.knowsky.com/607772.html

http://www.cnblogs.com/qieqing/archive/2008/10/06/1304399.html