2024年6月11日发(作者：)

HTML元素坐标定位，这些知识点得掌握

文档坐标和视口坐标

视口坐标是相对于窗口的坐标，而文档坐标是相对于整个文档而言。例如，在文档坐标中如

果一个元素的相对于文档的Y坐标是200px，并且用户已经把浏览器向下滚动了75px，那么视

口坐标中元素的Y坐标为200px – 75px = 125px。

如何获取浏览器滚动条的位置?Window对象的pageXOffset和pageYOffset属性在所有

浏览器中提供这些值，除IE8以及更早的版本。IE和所有现代浏览器也可以通过scrollLeft和

scrollTop属性获取滚动条位置。

下面代码的getScrollOffsets方法获取滚动条位置：

01 //以一个对象的x和y属性放回滚动条的位置

02 function getScrollOffsets(w){

03 w = w || window;

04 //除了IE 8以及更早的版本以外，其他浏览器都支持

if(ffset != null) return {x: ffset, y:

05

ffset};

06 //对标准模式下的IE

07 var d = nt;

08 if(Mode == "CSS1Compat")

return {x: Left, y:

09

Top};

10 //对怪异模式下的浏览器

11 return { x: Left, y: Top};

12 }

有时候能够判定视口的尺寸也是非常有用的，下面的代码简便地查询视口尺寸：

01 //作为一个对象的w和h属性返回视口的尺寸

02 function getViewportSize(w){

03 //使用指定的窗口， 如果不带参数则使用当前窗口

04 w = w || window;

05

06 //除了IE8及更早的版本以外，其他浏览器都能用

07 if(idth != null)

08 return {w: idth, h: eight};

09

10 //对标准模式下的IE（或任意浏览器）

11 var d = nt;

12 if(Mode == "CSS1Compat")

return {w: Width, h:

13

Height};

14

15 //对怪异模式下的浏览器

16 return {w: Width, h: Height};

17 }

上面的两个例子已经使用到scrollLeft、scrollTop、clientWidth、

clientHeight。 scrollLeft和scrollTop获取滚动条位置，而clientWidth和

clientHeight获取对象的尺寸。

查询元素的几何尺寸

判定一个元素的尺寸和位置最简单的方法是调用它的getBoundingClientRect()方法。该方

法是在IE5中引入的，而现在当前的所有浏览器都实现了。它不需要参数，返回left、right、top、

bottom属性的对象。

这个方法返回元素在视口坐标中的位置。为了转换为甚至用户滚动浏览器窗口以后任然有效

的文档坐标，需要加上滚动偏移量：

1 //元素相对于文档的坐标位置

2 function getElementRect(e){