JavaScript中如何获取网页元素位置
首先明确几个概念：
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不支持。
