首先明确几个概念：
1、网页大小：是指整张网页的全部面积大小；
2、浏览器窗口（viewport）大小：是指网页在浏览器窗口中的可见区域的面积大小；
3、绝对位置：是指网页元素左上角相对于整张网页左上角的（x，y）坐标；
4、相对位置：是指网页元素左上角相对于浏览器窗口左上角的（x，y）坐标。
1、clientWidth/clientHeight：表示网页元素在浏览器窗口中可见区域的宽/高，包括padding和content区域，不包括border和被滚动条卷去的内容；
使用如下方法获取浏览器窗口大小：
doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="description" content="Javascript Test">
<meta name="keywords" content="js test">
<meta name="author" content="cy">
<title>JS_TESTtitle>
<script type="text/javascript" defer="defer">
function getViewPort() {
//BackCompat表示IE6种quirks模式
if(document.compatMode == "BackCompat"){
return {
width: document.body.clientWidth,
height:document.body.clientHeight
}
}
else{//Css1Compat，正常兼容模式
return {
width: document.documentElement.clientWidth,
height:document.documentElement.clientHeight
}
}
}
function showArea() {
var area = getViewPort();
alert("width: " + area.width + "; height: " + area.height);
}
script>
head>
/*网页加载完成之后调用showArea方法，否则document对象还没有生成*/
<body onload="showArea()">
body>
html>
2、scrollWidth/scrollHeight：表示网页元素包含滚动条在内的可见区域宽/高；
理论上将上面方法中的clientWidth/clientHeight换成scrollWidth/scrollHeight同样可以获得浏览器窗口的大小，但是，当网页全部内容能在浏览器窗口中全部显示时，不同浏览器对clientWidth/clientHeight和scrollWidth/scrollHeight解释的大小不一样，此时我们应获取二者中的较大者，改写上面方法：
<script type="text/javascript" defer="defer"> function getViewPort() { //BackCompat表示IE6种quirks模式 if(document.compatMode == "BackCompat"){ return { width: Math.max(document.body.scrollWidth, document.body.clientWidth), height:Math.max(document.body.scrollHeight, document.body.clientHeight) } } else{//Css1Compat，正常兼容模式 return { width: Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth), height: Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) } } } function showArea() { var area = getViewPort(); alert("width: " + area.width + "; height: " + area.height); } script>
3、获取网页元素的绝对位置；
offsetLeft/offsetTop：是指网页元素左上角相对于其父容器（offsetParent）左上角的偏移量；通过循环父容器叠加offsetLeft/offsetTop便可获得其绝对位置，如下：
doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="description" content="Javascript Test">
<meta name="keywords" content="js test">
<meta name="author" content="cy">
<title>JS_TESTtitle>
<script type="text/javascript" defer="defer">
function getElementAbsoutlyLeft(element) {
var absoutlyLeft = element.offsetLeft;
var parent = element.offsetParent;
while(!!parent) {
absoutlyLeft += parent.offsetLeft;
parent = parent.offsetParent;
}
return absoutlyLeft;
}
function getElementAbsoutlyTop(element) {
var absoutlyTop = element.offsetTop;
var parent = element.offsetParent;
while(!!parent) {
absoutlyTop += parent.offsetTop;
parent = parent.offsetParent;
}
return absoutlyTop;
}
function showOffset() {
var ele = document.getElementById("child");
alert("absoutlyTop: " + getElementAbsoutlyTop(ele) + "; absoutlyLeft: " + getElementAbsoutlyLeft(ele));
}
script>
head>
<body onload="showOffset()">
<div style="margin: 20px auto; padding:20px; width:800px; height:600px; background-color:red;">
<div id="child" style="margin: 10px auto; padding:0; width:100%; height:100%; background-color:blue;">
div>
div>
body>
html>
4、获取网页元素的相对位置：
scrollLeft/scrollTop：指网页元素被滚动条卷去的部分；所以，用绝对位置减去document元素的scrollLeft/scrollTop值即可得到相对位置，如下：
doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="description" content="Javascript Test">
<meta name="keywords" content="js test">
<meta name="author" content="cy">
<title>JS_TESTtitle>
<script type="text/javascript" defer="defer">
function getElementRelativeLeft(element) {
var absoutlyLeft = element.offsetLeft;
var parent = element.offsetParent;
while(!!parent) {
absoutlyLeft += parent.offsetLeft;
parent = parent.offsetParent;
}
if(document.compatMode == "BackCompat") {
var elementScrollLeft = document.body.scrollLeft;
}
else {
var elementScrollLeft = document.documentElement.scrollLeft;
}
return absoutlyLeft - elementScrollLeft;
}
function getElementRelativeTop(element) {
var absoutlyTop = element.offsetTop;
var parent = element.offsetParent;
while(!!parent) {
absoutlyTop += parent.offsetTop;
parent = parent.offsetParent;
}
if(document.compatMode == "BackCompat") {
var elementScrollTop = document.body.scrollTop;
}
else {
var elementScrollTop = document.documentElement.scrollTop;
}
return absoutlyTop - elementScrollTop;
}
function showRelativeOffset(event) {
event.preventDefault();
var ele = document.getElementById("child");
alert("RelativeTop: " + getElementRelativeTop(ele) + "; RelativeLeft: " + getElementRelativeLeft(ele));
}
script>
head>
<body>
<div style="margin: 20px auto; padding:20px; width:800px; height:1000px; background-color:red;">
<div id="child" style="margin: 800px auto; padding:0; width:100%; height:100%; background-color:blue;">
<a href="" onclick="showRelativeOffset(event)">showRelativeOffseta>
div>
div>
body>
html>
5、获取网页元素位置的快速方法：
function getElementPosition(element) { var relativePosition = element.getBoundingClientRect(); /*left、top、right、bottom均为element的相对位置*/ var relativeLeft = relativePosition.left; var relativeTop = relativePosition.top; var relativeRight = relativePosition.right; var relativeBottom = relativePosition.bottom; /*******************************************/ }
用上面方法得到的相对位置加上document元素的scrollLeft/scrollTop值即可得到绝对位置：
目前，IE、Firefox 3.0+、Opera 9.5+都支持getBoundingClientRect方法，而Firefox 2.x、Safari、Chrome、Konqueror不支持。