js获取元素的页面坐标

一、DOM中各种宽度、高度

二、DOM中的坐标系

JS获取div元素的宽度

offsetWidth=width+padding-left+padding-right+border-left+border-right,
即offsetWidth描述的是元素的宽度，是指元素的宽度+内边距（左右两个）+边框（左右两个），不包括外边距和滚动条部分

offsetHeight=height+padding-top+padding-bottom+border-top+border-bottom,
即offsetHeight描述的是元素的高度，是指元素的高度+内边距（上下两个）+边框（上下两个），不包括外边距和滚动条部分

offsetTop=margin-top+padding-top(parent的)
即offsetTop描述的是元素和父容器的上边距离，是指元素的外边距（上边一个）+已定位的父容器（offsetParent）的内边距（上边一个）（不包括元素的边框和父容器的边框）

offsetLeft=margin-left+padding-left(parent的)
即offsetLeft描述的是元素和父容器的左边距离，是指元素的外边距（左边一个）+已定位的父容器（offsetParent）的内边距（左边一个）（不包括元素的边框和父容器的边框）

clientWidth=width+padding-left+padding-right
即clientWidth描述的是元素的宽度，是指元素的宽度+内边距（左右两个），不包括外边距、滚动条部分、边框

clientHeight=height+padding-top+padding-bottom
即clientHeight描述的是元素的高度，是指元素的高度+内边距（上下两个），不包括外边距、滚动条部分、边框

clientTop=border-top
即clientTop是指当前元素的上边框

clientLeft=border-left
即clientLeft是指当前元素的左边框

scrollWidth=width+padding-left+padding-right
即元素的滚动条宽度，是指宽度+内边距（左右两个），值等价于“clientWidth”的值

scrollHeight=height+padding-top+padding-bottom
即元素的滚动条高度，是指高度+内边距（上下两个），值等价于“clientHeight”的值

scrollTop元素的滚动条的垂直位置

scrollLeft元素的滚动条的水平位置

注：
http://www.cnblogs.com/kongxianghai/p/4192032.html
情况1：
元素内无内容或者内容不超过可视区，滚动不出现或不可用的情况下。

scrollWidth=clientWidth，两者皆为内容可视区的宽度。

offsetWidth为元素的实际宽度。

情况2：

元素的内容超过可视区，滚动条出现和可用的情况下。

scrollWidth>clientWidth。

scrollWidth为实际内容的宽度。

clientWidth是内容可视区的宽度。

offsetWidth是元素的实际宽度。

滚动条属性：
　　overflow：auto为自动，yes为有，no为无
　　overflow-x：横向滚动条
　　overflow-y：纵向滚动条

如果该div被包含在其他对象例如td中，则位置可设为相对：position:relative

特别是元素内容超过可视区，这里的滚动条宽度有点不太清楚

示例：

<div id="divParent" style="position:relative; background:#36F; padding:5px; border:2px solid #FF0; 300px; overflow:auto;">
    <div id="divChild" style="400px; height:100px; border:1px solid #fff; background:#69F; margin:20px; padding:10px;
    "></div>
</div>

<script type="text/javascript">
    var div = document.getElementById("divChild");
    var childWidth = div.offsetWidth;
    var childHeight = div.offsetHeight;
    var childTop = div.offsetTop;
    var childLeft = div.offsetLeft;
    
    div.innerHTML += "childWidth:" + childWidth + "<br />";
    div.innerHTML += "childHeight:" + childHeight + "<br />";
    div.innerHTML += "childTop:" + childTop + "<br />";
    div.innerHTML += "childLeft:" + childLeft + "<br />";
    
    
    var childParent = div.offsetParent;
    div.innerHTML += "childParent:" + childParent.id + "<br />";
    
    
    var clientWidth = div.clientWidth;
    var clientHeight = div.clientHeight;
    var clientTop = div.clientTop;
    var clientLeft = div.clientLeft;
    
    div.innerHTML += "client" + clientWidth + "<br />";
    div.innerHTML += "clientHeight:" + clientHeight + "<br />";
    div.innerHTML += "clientTop:" + clientTop + "<br />";
    div.innerHTML += "clientLeft:" + clientLeft + "<br />";
    
    
    //div.innerHTML = "";
    var divParent = document.getElementById("divParent");
    var scrollWidth = divParent.scrollWidth;
    var scrollHeight = divParent.scrollHeight;
    var scrollTop = divParent.scrollTop;
    var scrollLeft = divParent.scrollLeft;
    div.innerHTML+= "scrollWidth:" + scrollWidth + "<br />";
    div.innerHTML+= "scrollHeigth:" + scrollHeight + "<br />";
    div.innerHTML+= "scrollTop:" + scrollTop + "<br />";
    div.innerHTML+= "scrollLeft:" + scrollLeft + "<br />";
</script>