JavaScript获取页面元素位置详解：视口、绝对与相对坐标

网页大小与视口概念

在网页开发中，确定页面上特定元素的具体坐标位置是一项常见需求。

以下教程梳理了JavaScript在网页定位方面的核心知识。

首先，需要明确两个基础概念。

网页的整体尺寸即其大小，通常由页面内容本身及CSS样式共同决定。

浏览器窗口可视区域的大小，称为视口（viewport），指用户当前在浏览器窗口中看到的网页面积。

若网页内容能完全显示在浏览器窗口内且无滚动条，则网页大小与视口大小一致；若内容超出窗口，需通过滚动条查看网页的不同部分。

页面上每个元素均具备clientHeight和clientWidth属性，这两个属性表示元素内容区加上内边距（padding）所占的视觉面积，不包含边框（border）和滚动条占用的空间。

（图一 clientHeight和clientWidth属性）

因此，document元素的clientHeight和clientWidth属性值即代表整个网页的大小。

 
function getViewport(){
if (document.compatMode == "BackCompat"){
return {
width: document.body.clientWidth,
height: document.body.clientHeight
　　　　　　} 
} else {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
　　　　　　} 
　　　　} 
　　} 

上述getViewport函数用于返回浏览器窗口的高度和宽度。使用时需注意三点：

1）该函数必须在页面加载完成后执行，否则document对象尚未生成，浏览器会报错。

2）多数情况下，document.documentElement.clientWidth返回正确值。但在IE6的quirks模式中，document.body.clientWidth返回正确值，因此函数中加入了文档模式的判断。

3）clientWidth和clientHeight均为只读属性，不可赋值。

页面上每个元素还具有scrollHeight和scrollWidth属性，表示包含滚动条在内的该元素的视觉面积。

因此，document对象的scrollHeight和scrollWidth属性代表网页大小，即滚动条滚过的总长度和宽度。

仿照getViewport()函数，可编写getPagearea()函数。

 
function getPagearea(){
if (document.compatMode == "BackCompat"){
return {
width: document.body.scrollWidth,
height: document.body.scrollHeight
　　　　　　} 
} else {
return {
width: document.documentElement.scrollWidth,
height: document.documentElement.scrollHeight
　　　　　　} 
　　　　} 
　　} 

但该函数存在一个问题：若网页内容能在浏览器窗口中全部显示且无滚动条，则网页的clientWidth和scrollWidth应相等。实际上，不同浏览器处理方式不同，这两个值未必相等。因此，需取两者中较大的值，故需对getPagearea()函数进行改写。

 
function getPagearea(){
if (document.compatMode == "BackCompat"){
return {
width: Math.max(document.body.scrollWidth,
document.body.clientWidth),
height: Math.max(document.body.scrollHeight,
document.body.clientHeight)
　　　　　　} 
} else {
return {
width: Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth),
height: Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight)
　　　　　　} 
　　　　} 
　　} 

获取网页元素的绝对位置

网页元素的绝对位置，指该元素左上角相对于整张网页左上角的坐标，需通过计算得出。

每个元素均有offsetTop和offsetLeft属性，表示该元素左上角与父容器（offsetParent对象）左上角的距离。只需将这两个值累加，即可得到该元素的绝对坐标。

（图二 offsetTop和offsetLeft属性）

以下两个函数用于获取绝对位置的横坐标和纵坐标。

 
function getElementLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
　　　　} 
return actualLeft;
　　} 
function getElementTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualTop += current.offsetTop;
current = current.offsetParent;
　　　　} 
return actualTop;
　　} 

由于在表格和iframe中，offsetParent对象未必等于父容器，上述函数对表格和iframe中的元素不适用。

获取网页元素的相对位置

网页元素的相对位置，指该元素左上角相对于浏览器窗口左上角的坐标。

获得绝对位置后，获取相对位置便很简单，只需将绝对坐标减去页面滚动条滚动的距离即可。滚动条滚动的垂直距离为document对象的scrollTop属性；水平距离为document对象的scrollLeft属性。

（图三 scrollTop和scrollLeft属性）

对上一节中的两个函数进行相应改写：

 
function getElementViewLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
　　　　} 
if (document.compatMode == "BackCompat"){
var elementScrollLeft=document.body.scrollLeft;
} else {
var elementScrollLeft=document.documentElement.scrollLeft;
　　　　} 
return actualLeft-elementScrollLeft;
　　} 
function getElementViewTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualTop += current. offsetTop;
current = current.offsetParent;
　　　　} 
if (document.compatMode == "BackCompat"){
var elementScrollTop=document.body.scrollTop;
} else {
var elementScrollTop=document.documentElement.scrollTop;
　　　　} 
return actualTop-elementScrollTop;
　　} 

scrollTop和scrollLeft属性可赋值，且会立即自动滚动网页至相应位置，因此可利用它们改变网页元素的相对位置。此外，element.scrollIntoView()方法也有类似作用，可使网页元素出现在浏览器窗口的左上角。

获取元素位置的快速方法

除上述函数外，还有一种快速方法可立即获得网页元素的位置。

即使用getBoundingClientRect()方法。它返回一个对象，包含left、right、top、bottom四个属性，分别表示该元素左上角和右下角相对于浏览器窗口（viewport）左上角的距离。

因此，网页元素的相对位置即为

 
var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;

再加上滚动距离，即可得到绝对位置

 
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

目前，IE、Firefox 3.0+、Opera 9.5+支持该方法，而Firefox 2.x、Safari、Chrome、Konqueror不支持。