HTML DOM getBoundingClientRect() 方法

HTML DOM Element 对象

getBoundingClientRect()方法返回元素的大小及其相对于viewport(视口)的位置。

返回的值是具有八个属性的DOMRect对象:left, top, right, bottom, x, y, width, height。

注意:在计算边界矩形时,要考虑viewport区域的滚动量。这意味着每当滚动位置发生变化时,矩形的边缘(顶部、左侧、底部和右侧)都将更改它们的值。

语法:

element.getBoundingClientRect()
var div = document.getElementById("myDiv");
var rect = div.getBoundingClientRect();
测试看看‹/›

浏览器兼容性

所有浏览器完全支持getBoundingClientRect()方法:

方法
getBoundingClientRect()

技术细节

返回值:具有八个属性的DOMRect对象:left, top, right, bottom, x, y, width, height
DOM版本:CSS对象模型(CSSOM)

HTML DOM Element 对象