Dapatkan posisi tag div / span

Dapatkah seseorang menunjukkan kepada saya cara mendapatkan posisi top& leftdari elemen divatau spanjika tidak ditentukan?

yaitu:

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

Di atas, jika saya melakukannya:

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

Nilai 55pxdikembalikan. Namun, jika saya mencobanya untuk span'12a', maka tidak ada yang dikembalikan.

Saya memiliki banyak div/ spans pada halaman yang tidak dapat saya tentukantop / leftproperties-nya, tetapi saya perlu menampilkan divlangsung di bawah elemen itu.

Fungsi ini akan memberi tahu Anda posisi x, y elemen relatif terhadap halaman. Pada dasarnya Anda harus melakukan loop melalui semua orang tua elemen dan menambahkan offset mereka bersama-sama.

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

Namun, jika Anda hanya menginginkan posisi x, y dari elemen relatif terhadap wadahnya, maka yang Anda butuhkan hanyalah:

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

Untuk meletakkan sebuah elemen tepat di bawah yang ini, Anda juga perlu mengetahui tingginya. Ini disimpan di properti offsetHeight / offsetWidth.

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

Anda dapat memanggil metode getBoundingClientRect()dengan referensi ke elemen. Kemudian Anda dapat memeriksa top, left, rightdan / atau bottomproperti ...

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

Jika menggunakan jQuery, Anda dapat menggunakan kode yang lebih ringkas ...

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

Sementara jawaban @ nickf berhasil. Jika Anda tidak peduli dengan browser lama, Anda dapat menggunakan versi Javascript murni ini. Bekerja di IE9 +, dan lainnya

var rect = el.getBoundingClientRect();

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

Seperti yang dicatat Alex, Anda dapat menggunakan jQuery offset () untuk mendapatkan posisi relatif terhadap aliran dokumen. Gunakan posisi () untuk koordinat x, y relatif terhadap induk.

EDIT: Switched document.readyuntuk window.loadkarena loadmenunggu semua elemen sehingga Anda mendapatkan ukuran bukan hanya mempersiapkan DOM. Dalam pengalaman saya, loadmenghasilkan lebih sedikit elemen posisi Javascript yang salah.

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

Bagi siapa pun yang hanya membutuhkan posisi atas atau kiri, sedikit modifikasi pada kode @ Nickf yang dapat dibaca dapat membantu.

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

dan

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

Saya menyadari ini adalah utas lama, tetapi jawaban @alex perlu ditandai sebagai jawaban yang benar

element.getBoundingClientRect() sama persis dengan jQuery $(element).offset()

Dan itu kompatibel dengan IE4 + ... https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect