รับตำแหน่งของแท็ก div / span

ใครสามารถแสดงวิธีรับtop& leftตำแหน่งขององค์ประกอบdivหรือspanเมื่อไม่ได้ระบุ?

กล่าวคือ:

<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/ spans มากมายในหน้าที่ฉันไม่สามารถระบุtop/ leftproperties ได้ แต่ฉันต้องการแสดงdivโดยตรงภายใต้องค์ประกอบนั้น

ฟังก์ชันนี้จะบอกตำแหน่ง 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 ที่สัมพันธ์กับพาเรนต์

แก้ไข: Switched document.readyสำหรับwindow.loadเพราะloadรอให้ทุกองค์ประกอบเพื่อให้คุณได้รับขนาดของพวกเขาแทนที่จะเตรียม DOM จากประสบการณ์ของฉันloadส่งผลให้องค์ประกอบตำแหน่ง Javascript ที่ไม่ถูกต้องน้อยลง

$(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