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 均为只读属性，不可赋值。

获取网页绝对大小的实现

三、获取网页的绝对大小

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) } } }

计算网页元素的绝对位置

四、获取网页元素的绝对位置

由于网页大小分为绝对和相对两种，网页元素的位置也相应分为绝对位置和相对位置。网页元素左上角相对于整张网页左上角的坐标称为绝对位置；相对于浏览器窗口左上角的坐标称为相对位置。

在 JavaScript 中，网页元素的绝对坐标需通过计算得出。每个元素都有 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 快速定位

六、获取元素位置的快速方法

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

该方法为使用 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 不支持。

（完）