Bir div / span etiketinin konumunu alın

Biri belirtilmediğinde bir veya öğesinin top& leftkonumunu nasıl alacağımı bana gösterebilir mi?divspan

yani:

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

Yukarıdakileri yaparsam:

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

Değeri 55pxdöndürülür. Ancak, bunu span'12a' için denersem, hiçbir şey geri dönmez.

Bir sayfada / özelliklerini belirtemediğim bir sürü div/ spans var , ancak doğrudan bu öğenin altında görüntülemem gerekiyor .topleftdiv

Bu işlev size öğenin sayfaya göre x, y konumunu söyleyecektir. Temel olarak, öğenin tüm ebeveynlerini gözden geçirmeniz ve ofsetlerini bir araya getirmeniz gerekir.

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};
}

Ancak, öğenin kabına göre yalnızca x, y konumunu istiyorsanız, ihtiyacınız olan tek şey şudur:

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

Doğrudan bunun altına bir öğe koymak için yüksekliğini de bilmeniz gerekir. Bu, offsetHeight / offsetWidth özelliğinde saklanır.

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

Yöntemi getBoundingClientRect(), öğeye bir başvuru üzerine çağırabilirsiniz . Sonra inceleyebilirsiniz top, left, rightve / veya bottomözelliklerini ...

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

JQuery kullanıyorsanız, daha kısa ve öz kodu kullanabilirsiniz ...

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

@ Nickf'in cevabı işe yararken. Eski tarayıcıları umursamıyorsanız, bu saf Javascript sürümünü kullanabilirsiniz. IE9 + ve diğerlerinde çalışır

var rect = el.getBoundingClientRect();

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

Alex'in belirttiği gibi, belge akışına göre konumu elde etmek için jQuery ofset () kullanabilirsiniz. Üst öğeye göre x, y koordinatları için position () kullanın.

DÜZENLEME: Anahtarlı document.readyiçin window.loadçünkü loadtüm öğeleri bekler sadece DOM hazırlamak yerine boyutlarını olsun. Deneyimlerime göre, loaddaha az hatalı Javascript konumlandırılmış öğelere neden oluyor.

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

Sadece yukarı veya sol konuma ihtiyaç duyan herkes için, @ Nickf'in okunabilir kodunda küçük değişiklikler yapılması işi halleder.

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

ve

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

Bunun eski bir ileti dizisi olduğunu anlıyorum, ancak @alex'in yanıtının doğru yanıt olarak işaretlenmesi gerekiyor

element.getBoundingClientRect() jQuery ile tam olarak eşleşir $(element).offset()

Ve IE4 + ile uyumludur ... https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect