純粋なJavascriptでの要素座標

Question

divの中に要素があるとします（または他の要素を含むか、おそらく文書の本文にある）。どのようにその要素の（x、y）座標をそのコンテナに対して相対的に取得するのですか？

そして、私は純粋なJavaScriptでそれを行うことができるようにする必要があり...

Answer 1

はShankarSangoliのポストのオフに行く

以下

document.getElementById("elementId").offsetTop; 
document.getElementById("elementId").offsetLeft; 

Answer 2

を使用して、それがこの方法を拡張することができます。親（コンテナ）との差と子（問題の要素）を取得します：

var parentOffsetTop = document.getElementById("parentId").offsetTop; 
var parentOffsetLeft = document.getElementById("parentId").offsetLeft; 
var childOffsetTop = document.getElementById("childId").offsetTop; 
var childOffsetLeft = document.getElementById("childId").offsetLeft; 

var xOffset = parentOffsetLeft - childOffsetLeft; 
var yOffset = parentOffsetTop - childOffsetTop; 

編集：私は間違っていたようで、offsetLeftとoffsetTopはとにかく親のオフに基づいています。これを手動で行う必要はありません！

Answer 3

offsetTopとoffsetLeftのプロパティはoffsetParentからの相対値で、親に対して相対的な位置を自由に得ることができます。ポジション全体をbodyに関連付ける場合は、offsetParentチェーンをトラバースして値を合計する必要があります。

function findPos(obj) { 
    var curleft = 0, curtop = 0; 
    if (obj.offsetParent) { 
     do { 
      curleft += obj.offsetLeft; 
      curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 
     return { x: curleft, y: curtop }; 
    } 
    return undefined; 
}