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; width:300px; overflow:auto;">
    <div id="divChild" style="width: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 += "clientwidth:" + 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>