首先明確幾個概念：
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_TEST</title> <!--[if lt IE 9]> //Todo...... <![endif]--> <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_TEST</title> <!--[if lt IE 9]> //Todo...... <![endif]--> <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_TEST</title> <!--[if lt IE 9]> //Todo...... <![endif]--> <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)">showRelativeOffset</a> </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值即可得到絕對位置：
<script type="text/javascript" defer="defer">
function getElementPosition(element) {
var relativePosition = element.getBoundingClientRect();
var relativeLeft = relativePosition.left;
var relativeTop = relativePosition.top;
if(document.compatMode == "BackCompat") {
var elementScrollLeft = document.body.scrollLeft;
var elementScrollTop = document.body.scrollTop;
}
else {
var elementScrollLeft = document.documentElement.scrollLeft;
var elementScrollTop = document.documentElement.scrollTop;
}
return {
absolutlyLeft: relativeLeft + elementScrollLeft,
absolutlyTop: relativeTop + elementScrollTop
}
}
</script>
目前，IE、Firefox 3.0+、Opera 9.5+都支持getBoundingClientRect方法，而Firefox 2.x、Safari、Chrome、Konqueror不支持。