在创建网页的过程中，有时需要知道网页上某个元素的确切位置。下面的教程总结了网页定位中Javascript的相关知识。一、网页的大小和浏览器窗口的大小首先要明确两个基本概念。网页的总面积就是它的大小。一般来说，网页的大小是由内容和CSS样式表决定的。浏览器的大小是指在浏览器窗口中看到的网页区域，也称为视口。显然，如果一个网页的所有内容都可以在浏览器窗口中显示(即没有滚动条出现)，那么这个网页的大小就等于浏览器窗口的大小。如果没有，滚动浏览器窗口以显示网页的所有部分。第二，得到网页的大小。网页上的每个元素都有clientHeight和clientWidth属性。这两个属性是指元素的内容部分加上填充所占据的可视区域，不包括边框和滚动条所占据的空间。

(图1 clientHeight和clientWidth属性)因此，文档元素的clientHeight和clientWidth属性代表了网页的大小。复制代码如下： function getviewport(){ if(document.compat mode==' back compat '){ return { width : document . body . client width， document . body . client height}上的getViewport函数} else { return { width : document . document element . client width，height }可以返回浏览器窗口的高度和宽度。使用时有三点需要注意：1)该功能必须在页面加载后运行，否则还没有生成文档对象，浏览器会报错。2)在大多数情况下，返回正确值的是document . document element . client width。但是在IE6的怪癖模式下，document.body.clientWidth返回的值是正确的，所以函数中加入了文档模式的判断。3)clientWidth和clientHeight都是只读属性，因此不能给它们赋值。3.获取网页大小的另一种方法网页上的每个元素也有scrollHeight和scrollWidth属性，这是指元素的可视区域，包括滚动条。然后，文档对象的scrollHeight和scrollWidth属性是网页的大小，这意味着滚动条滚动的所有长度和宽度。模仿getViewport()函数，可以编写getPagearea()函数。复制代码如下： function getpagearea(){ if(document.compat mode==' back compat '){ return { width : document . body . scroll width，Height : document . body . scroll Height } } else { return { width : document . document . document . document element . scroll Height } }但是此函数有问题。如果网页的内容可以在没有滚动条的浏览器窗口中完全显示，那么网页的clientWidth和scrollWidth应该相等。但实际上，不同的浏览器有不同的处理方式，所以这两个值可能不相等。因此，我们需要取其中较大的一个，所以我们需要重写getPagearea()函数。复制代码如下： function getpage area(){ if(document.compat mode==' back compat '){ return { width : math . max(document . body . scroll width，document.body.clientWidth)，height: Math . max(document . body . scroll Height，document . document element . client width)} } else { return { width 3: math . max(document . document element . scroll width，document.body.clientWidth)，Height : math。获取网页元素的绝对位置，指该元素左上角相对于整个网页左上角的坐标。这个绝对位置只能通过计算得到。首先，每个元素都有offsetTop和offsetLeft属性，它们指示元素左上角和父容器(offsetParent对象)左上角之间的距离。因此，只有将这两个值相加，才能获得元素的绝对坐标。

（图二偏移和offsetLeft属性)下面两个函数可以用来获取绝对位置的横坐标和纵坐标。复制代码代码如下：函数getElementLeft(element){ var actualLeft=element。offsetleft无功电流=元件。offsetparent而(当前！==null){ actualLeft=current。offsetleftcurrent=current.offsetParent}返回实际左侧；}函数GetElementTop(元素){ var actualTop=元素。offsetTop无功电流=元件。offsetparent而(当前！==null){实际顶部=当前。偏移；current=current.offsetParent}返回实际值；} 由于在表格和内联框架中，offsetParent对象未必等于父容器，所以上面的函数对于表格和内联框架中的元素不适用。五、获取网页元素的相对位置网页元素的相对位置，指该元素左上角相对于浏览器窗口左上角的坐标。有了绝对位置以后，获得相对位置就很容易了，只要将绝对坐标减去页面的滚动条滚动的距离就可以了。滚动条滚动的垂直距离，是文件对象的scrollTop属性；滚动条滚动的水平距离是文件对象的滚动属性

（图三scrollTop和滚动属性)对上一节中的两个函数进行相应的改写：复制代码代码如下：函数GetElementViewLeft(元素){ var actualLeft=元素。offsetLeftvar电流=元素。offsetparent而(当前！==null){ actualLeft=current。offsetleftcurrent=current . offsetparent } if(document。compat mode==' back compat '){ var element scrolleft=document。尸体。被偷窃；} else { var element scroll ft=document。文档元素。被偷窃；}返回实际left-element scroll ft；}函数getElementViewTop(元素){ var actualTop=元素。偏移；无功电流=元件。offsetparent而(当前！==null){ ActiVe ToP=当前. offsetopcurrent=current . offsetparent } if(文档。compat mode==' back compat '){ var element scroll top=document。尸体。滚动顶部；} else { var element scroll top=document。文档元素。滚动顶部；}返回实际顶部元素滚动顶部；} scrollTop和滚动属性是可以赋值的，并且会立即自动滚动网页到相应位置，因此可以利用它们改变网页元素的相对位置。另外，element.scrollIntoView()方法也有类似作用，可以使网页元素出现在浏览器窗口的左上角。六、获取元素位置的快速方法除了上面的函数以外，还有一种快速方法，可以立刻获得网页元素的位置。那就是使用getBoundingClientRect()方法。它返回一个对象，其中包含了左、右、上、下四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（视口)左上角的距离。所以，网页元素的相对位置就是复制代码代码如下： var X=这个。getboundingclientrect().向左；var Y=这个。getboundingclientrect().顶部；再加上滚动距离，就可以得到绝对位置复制代码代码如下： var X=这个。getboundingclientrect().左文档。文档元素。向左滚动；var Y=这个。getboundingclientrect().顶级文档。文档元素。滚动顶部；目前、工业工程、火狐3.0、Opera 9.5都支持该方法，而火狐2.x、Safari、Chrome、Konqueror不支持。