js獲取元素位置以及元素頁面大小總結：
一：元素位置：
js中獲取元素位置也就是元素的left以及top位置利用el.offset即可。el.offsetLeft以及el.offsetTop獲取的是元素邊框外部到目標位置距離；
而我們如果要獲得元素相對於頁面的絕對位置就不得不循環元素父元素然後將循環值相加得到的即爲元素真實的絕對位置
代碼如下：
獲取元素相對頁面位置
var getPos = function(o) {
for(var _pos = {x: 0, y: 0}; o; o = o.offsetParent) {
_pos.x += o.offsetLeft;
_pos.y += o.offsetTop;
}return _pos;
};
二：元素大小：
元素大小即元素的寬高，在獲得元素大小時候分爲隱藏以及顯示兩種處理方式：即display爲none與非none；
顯示效果可以直接用el.offsetWidth去獲得，由於offsetWidth以及offsetHeight都是由ie最先支持的，不屬於w3c標準，但是由於其傳播性較廣，致使其他瀏覽器都紛紛效仿實現。
也就是說：目前各大瀏覽器都對offsetWidth以及offsetHeight支持，並且效果是一樣的，都是從元素邊界開始計算即：padding+width+border;不過還是不排除個別瀏覽器的特立獨行；
所以我們還是要兼容一下 以防萬一:
var cssX=function(elem){
if(elem.style.width)return elem.style.width;
if(elem.currentStyle)return elem.currentStyle.width;
if(document.defaultView && document.defaultView.getComputedStyle)
return document.defaultView.getComputedStyle(elem,"").getPropertyValue("width");
}
var cssY=function(elem){
if(elem.style.height)return elem.style.height;
if(elem.currentStyle)return elem.currentStyle.height;
if(document.defaultView && document.defaultView.getComputedStyle)
return document.defaultView.getComputedStyle(elem,"").getPropertyValue("height");}
對於可見元素獲得元素大小可以用
var getWidth=el.offsetWidth||cssX(el),
getHeight=el.offsetHeight||cssY(el);
對於隱藏元素，我們要獲得其大小就需要先將其狀態設置爲可見然後得到大小，之後再將其隱藏即可：
var resetCSS=function( elem, prop ) {
var old = {};
for ( var i in prop ) {
old[ i ] = elem.style[ i ];
elem.style[ i ] = prop[i];
}
return old;
}
var restoreCSS=function( elem, prop ) {
for ( var i in prop )
elem.style[ i ] = prop[ i ];
}
在這裏我們先將元素本身的屬性賦予old對象，然後將要設置的屬性直接賦給元素。進而可以計算元素大小，之後用restoreCss再將元素style屬性恢復即可；
綜上：獲取元素寬高如下：var getClient=function(elem){
if(elem.style.display!="none"){
return {width:elem.offsetWidth || parseInt(cssX(elem)),height:elem.offsetHeight || parseInt(cssY(elem)) };
}
var old = zipCode.resetCSS( elem, {
display: '',
visibility: 'hidden',
position: 'absolute'
});
var off ={width:elem.offsetWidth || parseInt(cssX(elem)),height:elem.offsetHeight || parseInt(cssY(elem)) };
zipCode.restoreCSS( elem, old );
return off;
}三：頁面大小
獲取頁面大小可以用scrollHeight以及scrollWidth，不過在沒有滾動條時候瀏覽器對於clientHeight、clientWidth與scrollHeight、scrollWidth關係並不清晰：
有的瀏覽器認爲兩者相同：即使相同也分爲結果爲視口大小以及文檔大小；不相同時候瀏覽器對兩者解釋也是因爲視口大小還是文檔大小存在差別；
不過這些差別我們可以不必去理會；因爲要確定文檔總高度，只需要取得兩者中最大值即可：而對於視口大小，同理只需獲取兩者中最小值即可：
不過由於ie6之前版本以及混雜模式下，瀏覽器都是以body爲整個文檔大小去計算。所以我們還要稍加判斷是否是混雜模式：
最終代碼如下：
var getViewport=function(){
var doc=document.compatMode=='BackCompat'?document.body:document.documentElement;//混雜模式用body否則用html文檔對象
return {width:Math.max(doc.scrollWidth,doc.clientWidth),height:Math.max(doc.scrollHeight,doc.clientHeight)}
}