Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
语法
rectObject = object.getBoundingClientRect();
值
返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects()
方法返回的一组矩形的集合, 即:是与该元素相关的CSS 边框集合 。
DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
空边框盒(译者注:没有内容的边框)会被忽略。如果所有的元素边框都是空边框,那么这个矩形给该元素返回的 width、height 值为0,left、top值为第一个css盒子(按内容顺序)的top-left值。
当计算边界矩形时,会考虑视口区域(或其他可滚动元素)内的滚动操作,也就是说,当滚动位置发生了改变,top和left属性值就会随之立即发生变化(因此,它们的值是相对于视口的,而不是绝对的)。如果不希望属性值随视口变化,那么只要给top、left属性值加上当前的滚动位置(通过window.scrollX和window.scrollY),这样就可以获取与当前的滚动位置无关的常量值。
为了跨浏览器兼容,请使用 window.pageXOffset
和 window.pageYOffset
代替 window.scrollX
和 window.scrollY。不能访问这些属性的脚本可以使用下面的代码:
// For scrollX (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft // For scrollY (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollTop == 'number' ? t : document.body).scrollTop
举例
// rect 是一个具有四个属性left、top、right、bottom的DOMRect对象 //译者注:DOMRect 是 TextRectangle或 ClientRect 的别称,他们是相同的。 var rect = obj.getBoundingClientRect();
规范
Specification | Status | Comment |
---|---|---|
CSS Object Model (CSSOM) View Module Element.getBoundingClientRect() |
Working Draft | Initial definition |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0[1] | 3.0 (1.9)[3] | 4.0 [2] | (Yes) | 4.0 |
width/height | (Yes) | 3.5 (1.9.1)[3] | 9 | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 2.0 | 1.0 | 1.0 (1.9) | 6.0 | (Yes) | 4.0 |
[1] CSS spec for 'use' element 规定了用于 <use>
元素的 'symbol' 元素要设置默认的 width 和 height 为 100%。spec for width and height 'svg' attributes 也要求将 100% 作为默认值。Google Chrome 没有遵循这些规定。同时 Chrome 也不会将 stroke-width
加入计算。所以 Chrome 和 Firefox 浏览器的 getBoundingClientRect()
返回的可能是不同的。
[2] 在IE8或者更低浏览器版本中,getBoudingClientRect()方法返回的TextRectangle对象没有height和width属性。同时,额外的属性(包括height和width)也不能添加到TextRectangle对象中去。
[3] Gecko 1.9.1 将 width
和 height 属性
加入到 DOMRect
对象中。
从 Gecko 12.0(Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) 开始,计算元素的边界矩形会将 CSS transforms 考虑进来。