Nhận vị trí của thẻ div / span

Ai đó có thể chỉ cho tôi cách lấy top& leftvị trí của một divhoặc spanphần tử khi một hoặc phần tử không được chỉ định không?

I E:

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

Ở trên, nếu tôi làm:

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

Giá trị của 55pxđược trả về. Tuy nhiên, nếu tôi thử điều đó cho span'12a', thì không có gì được trả lại.

Tôi có một loạt các div/ spans trên một trang mà tôi không thể chỉ định các thuộc tính top/ left, nhưng tôi cần hiển thị divtrực tiếp dưới phần tử đó.

Hàm này sẽ cho bạn biết vị trí x, y của phần tử so với trang. Về cơ bản, bạn phải lặp lại tất cả các cha mẹ của phần tử và cộng các hiệu số của chúng lại với nhau.

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

Tuy nhiên, nếu bạn chỉ muốn vị trí x, y của phần tử liên quan đến vùng chứa của nó, thì tất cả những gì bạn cần là:

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

Để đặt một phần tử ngay bên dưới phần tử này, bạn cũng cần biết chiều cao của phần tử đó. Điều này được lưu trữ trong thuộc tính offsetHeight / offsetWidth.

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

Bạn có thể gọi phương thức getBoundingClientRect()trên một tham chiếu đến phần tử. Sau đó, bạn có thể kiểm tra top, left, rightvà / hoặc bottomtài sản ...

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

Nếu sử dụng jQuery, bạn có thể sử dụng mã ngắn gọn hơn ...

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

Trong khi câu trả lời của @ nickf hoạt động. Nếu bạn không quan tâm đến các trình duyệt cũ hơn, bạn có thể sử dụng phiên bản Javascript thuần túy này. Hoạt động trên IE9 + và các trình duyệt khác

var rect = el.getBoundingClientRect();

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

Như Alex đã lưu ý, bạn có thể sử dụng jQuery offset () để có được vị trí liên quan đến luồng tài liệu. Sử dụng vị trí () cho các tọa độ x, y của nó liên quan đến gốc.

EDIT: Switched document.readycho window.loadvì loadchờ đợi cho tất cả các yếu tố để bạn có được kích thước của chúng thay vì chỉ đơn giản là chuẩn bị DOM. Theo kinh nghiệm của tôi, loaddẫn đến ít phần tử Javascript được định vị sai hơn.

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

Đối với bất kỳ ai chỉ cần vị trí trên cùng hoặc bên trái, các sửa đổi nhỏ đối với mã có thể đọc được của @ Nickf sẽ thực hiện được mẹo.

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

và

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

Tôi nhận ra đây là một chủ đề cũ, nhưng câu trả lời của @alex cần được đánh dấu là câu trả lời chính xác

element.getBoundingClientRect() là một kết hợp chính xác với jQuery's $(element).offset()

Và nó tương thích với IE4 + ... https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundsClientRect