現在web頁面的互動方式越來越多樣化，其中拖放頁面元素也是一種很常見的操作。在這類操作當中有兩個主要問題需要解決，乙個是事件的註冊方式，一般處理拖放元素的事件順序是：捕獲滑鼠正鍵按下——註冊滑鼠移動事件——捕獲滑鼠正鍵抬起——登出滑鼠移動事件；另乙個問題就是拖放元素的位置，即x/y座標。這裡我主要來講述後面的問題：如何獲取乙個dom元素的座標。
當今已有很多的js框架封裝了獲取dom元素的座標的方法，我們可以直接使用，而這裡我更多的是希望透過這些方法，看到原始的獲取座標方式以及如何處理跨瀏覽器問題。
首先認識一下getboundingclientrect方法，標準語法為：
orect = object.getboundingclientrect();
dom節點呼叫該方法可返回乙個clientrect型別的物件，該物件有四個屬性值：top、left、right、bottom，表示了該節點相對於可視瀏覽器可視區域的左上角位置的座標，如果當前的元素已經超出可視區域，依然按照可視區域的左上角位置的座標來計算，
這樣就可以簡單的獲取dom元素在可視區裡的x/y座標（通過left和top屬性）。最後在計算上頁面滾動條的偏移量就可以計算出元素在整個頁面中的x/y座標了。頁面滾動偏移量的計算在不同瀏覽器下有所不同，不過我們可以借鑑yui裡面方法，設計乙個通用的方式：
scrollleft = math.max(document.documentelement.scrollleft, document.body.scrollleft);
scrolltop = math.max(document.documentelement.scrolltop, document.body.scrolltop);
在w3c標準下document.body.scrolltop和document.body.scrollleft都為0，所以採用了上面相容的方式獲取頁面滾動條的偏移量。
將clientrect物件的left、top屬性分別加上scrollleft和scrolltop，就能獲取dom元素的x/y座標了。但對於ie8之前的ie版本在很多情況下要對這個值進行一些調整，有三種情況，下面來分別看一下：
這樣就可以獲取最後準確的x/y座標了。
如果所有的瀏覽器都能如此就好了，可惜有些瀏覽器（ff2、safari）不支援getboundingclientrect方法。需要通過一級級查詢和計算offsetparent來獲取x/y座標值。這裡首先介紹什麼是元素的offsetparent屬性。
offsetparent屬性是距離呼叫offsetparent的元素最近的（在包含層次中最靠近的），並且是已進行過css定位的與容器元素。首先說明一下css定位，是指對元素設定position屬性為absolute、relative或fixed(ie6除外)，還有乙個問題是元素在table元素中時會有不同的情況。下面是我的一些歸納，不全之處望大家指出：
知道了offsetparent屬性的含義，就可以通過offsetparent屬性來一級級的計算x/y座標了。一種比較簡單的while迴圈：
var node;/*求座標的元素*/ var xy=;/*儲存xy座標*/ while ((node = node.offsetparent))
通過這乙個迴圈就能累計元素每級offsetparent屬性元素的偏移量，但這個偏移量在累加的過程中沒有計算每級父元素有滾動條的情況，最後還要同getboundingclientrect方法一樣加上頁面滾動值（這裡scrollleft和scrolltop）。現在先來累計計算元素每上級元素的滾動條情況，首先判斷元素本身是不是設定了position為fixed：
這樣最後就可以在不支援getboundingclientrect方法的瀏覽器下獲取元素的x/y座標了。
最後總結一下，如果瀏覽器支援getboundingclientrect方法，通過該方法再加上頁面滾動條的偏移就能獲取元素的x/y了（不同瀏覽器需要微調），如果不支援getboundingclientrect方法，則需要通過迴圈該元素的每級offsetparent屬性來累計偏移量，再通過每個父級元素的滾動條來調整，最後再加上頁面滾動條的偏移來獲取元素的x/y座標。獲取x/y座標的方式還有很多，可能不盡相同。
DOM元素的獲取
通過id獲取元素 document.getelementbyid id 通過class獲取元素 document.getelementsbyclassname class 注意 這裡不相容ie8及以下，jq的話獲取class不影響這裡，假如要這樣操作的話，你需要寫個方法 function getel...
獲取html元素的座標
獲取相對於頁面的座標 x e.offsetleft p e.offsetparent while p do x x p.offsetleft p p.offsetparent end return x y e.offsettop p e.offsetparent while p do y y p.o...
獲取元素的精確座標
var getcoords function el function getwindow el function iswindow obj 總結一下下 b size large window.pageyoffset size b 非ie的東東，和ie的document.body.scrolltop很...