下面的教程总结了网页定位中Javascript的相关知识。首先是网页的绝对大小和相对大小。首先要明确两个基本概念。网页的总面积就是它的绝对大小。一般来说，网页的绝对大小是由内容和CSS样式表决定的。网页的相对大小是指在浏览器窗口中看到的网页部分，即浏览器窗口的大小，也称为视口。下图中间的方框代表浏览器窗口，一次只能显示网页的一部分。

(图1网页的绝对大小和相对大小)很明显，如果网页的内容在浏览器窗口中可以完全显示(即不出现滚动条)，那么网页的绝对大小和相对大小是相等的。其次，获取网页的相对大小。网页上的每个元素都有clientHeight和clientWidth属性，可以用来获取网页的相对大小。这两个属性表示的大小是指元素的内容部分加上填充的大小，但不包括边框和滚动条所占的空间。

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

(图3 offsetTop和offsetLeft属性)下面两个函数可以用来获取绝对位置的横坐标和纵坐标。函数getElementLeft(element){ var actualLeft=element . offsetleft；var current=element . offsetparent；while(当前！==null){ actualLeft=current . offsetleft；current=current.offsetParent}返回实际左侧；}函数GetElementTop(element){ var actualTop=element . offsetTop；var current=element . offsetparent；while(当前！==null){ actual top=current . offsettop；current=current.offsetParent}返回实际值；}因为offsetParent对象不一定等于tables和iframe中的父容器，所以上述函数不适用于tables和iframe中的元素。5.获取网页元素的相对位置一旦你有了一个元素的绝对位置，就很容易获取相对位置，只需要从滚动条的滚动距离中减去绝对坐标即可。滚动条的垂直距离是文档对象的scrollTop属性；滚动条滚动的水平距离是文档对象的scrollLeft属性。

（图四scrollTop和滚动属性)对上一节中的两个函数进行相应的改写：函数GetElementViewLeft(元素){ var actualLeft=元素。offsetLeft无功电流=元件。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不支持。(完)