div / spanタグの位置を取得する

誰かがどのように得るために私を示すことができるtopとleftの位置divまたはspan1が指定されていないときの要素を？

つまり：

<span id='11a' style='top:55px;' onmouseover="GetPos(this);">stuff</span>
<span id='12a' onmouseover="GetPos(this);">stuff</span>

上記で、私が行う場合：

document.getElementById('11a').style.top

の値55pxが返されます。ただし、span「12a」に対してそれを試した場合、何も返されません。

/ プロパティを指定できないページにdiv/ がたくさんありspanますが、その要素のすぐ下に表示する必要があります。topleftdiv

この関数は、ページに対する要素のx、y位置を通知します。基本的に、すべての要素の親をループアップし、それらのオフセットを一緒に追加する必要があります。

function getPos(el) {
    // yay readability
    for (var lx=0, ly=0;
         el != null;
         lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
    return {x: lx,y: ly};
}

ただし、要素のコンテナに対する相対的なx、y位置が必要な場合は、必要なのは次のとおりです。

var x = el.offsetLeft, y = el.offsetTop;

要素をこの要素のすぐ下に配置するには、その高さも知る必要があります。これは、offsetHeight / offsetWidthプロパティに格納されます。

var yPositionOfNewElement = el.offsetTop + el.offsetHeight + someMargin;

getBoundingClientRect()要素への参照でメソッドを呼び出すことができます。次に、あなたが調べることができtop、left、rightおよび/またはbottom性質を...

var offsets = document.getElementById('11a').getBoundingClientRect();
var top = offsets.top;
var left = offsets.left;

jQueryを使用している場合は、より簡潔なコードを使用できます...

var offsets = $('#11a').offset();
var top = offsets.top;
var left = offsets.left;

@nickfの答えは機能しますが。古いブラウザを気にしない場合は、この純粋なJavaScriptバージョンを使用できます。IE9 +などで動作します

var rect = el.getBoundingClientRect();

var position = {
  top: rect.top + window.pageYOffset,
  left: rect.left + window.pageXOffset
};

Alexが指摘したように、jQuery offset（）を使用して、ドキュメントフローに対する相対位置を取得できます。親を基準にしたx、y座標には、position（）を使用します。

編集：単にDOMを準備するのではなく、すべての要素を待機してサイズを取得するために切り替えdocument.readyられましwindow.loadたload。私の経験では、loadJavaScriptで正しく配置されていない要素が少なくなります。

$(window).load(function(){ 
  // Log the position with jQuery
  var position = $('#myDivInQuestion').position();
  console.log('X: ' + position.left + ", Y: " + position.top );
});

上または左の位置だけが必要な場合は、@ Nickfの読み取り可能なコードを少し変更するだけでうまくいきます。

function getTopPos(el) {
    for (var topPos = 0;
        el != null;
        topPos += el.offsetTop, el = el.offsetParent);
    return topPos;
}

そして

function getLeftPos(el) {
    for (var leftPos = 0;
        el != null;
        leftPos += el.offsetLeft, el = el.offsetParent);
    return leftPos;
}

私はこれが古いスレッドであることを理解していますが、@ alexの答えは正しい答えとしてマークする必要があります

element.getBoundingClientRect() jQueryのと完全に一致しています $(element).offset()

そして、IE4 +と互換性があります... https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect