Tìm X/Y của phần tử HTML có JavaScript

Question

Làm cách nào để tìm tọa độ XY của phần tử HTML (DIV) từ JavaScript nếu chúng không được đặt rõ ràng?

Answer 1

Điều đó có thể phức tạp tùy thuộc vào trình duyệt và phiên bản. Tôi sẽ đề nghị sử dụng jQuery và plugin vị trí.

Answer 2

Tôi không chắc bạn cần gì và những thứ như vậy luôn tương đối (màn hình, cửa sổ, tài liệu). Nhưng khi tôi cần thiết để con số đó ra, tôi tìm thấy trang web này hữu ích: http://www.mattkruse.com/javascript/anchorposition/source.html

Và tôi cũng phát hiện ra rằng các tooltip cắm ai đó làm cho jQuery có tất cả các loại cái nhìn sâu sắc thú vị để x, y vị trí thủ thuật (nhìn vào khung nhìn của nó và hỗ trợ cơ bản mà jQuery cung cấp cho nó). http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

Answer 3

Bạn có thể sử dụng một thư viện như Prototype hoặc jQuery, hoặc bạn có thể sử dụng this handy function:

Nó trả về một mảng.

myPos = findPos(document.getElementById('something')) 
x = myPos[0] 
y = myPos[1] 

function findPos(obj) { 
    var curleft = curtop = 0; 
    if (obj.offsetParent) { 
    curleft = obj.offsetLeft 
    curtop = obj.offsetTop 
    while (obj = obj.offsetParent) { 
     curleft += obj.offsetLeft 
     curtop += obj.offsetTop 
    } 
    } 
    return [curleft,curtop]; 
} 

Answer 4

Đây là cách tôi làm điều đó:

// Based on: http://www.quirksmode.org/js/findpos.html 
var getCumulativeOffset = function (obj) { 
    var left, top; 
    left = top = 0; 
    if (obj.offsetParent) { 
     do { 
      left += obj.offsetLeft; 
      top += obj.offsetTop; 
     } while (obj = obj.offsetParent); 
    } 
    return { 
     x : left, 
     y : top 
    }; 
}; 

Answer 5

Đối với những gì nó có giá trị, đây là một phiên bản đệ quy:

function findPos(element) { 
    if (element) { 
    var parentPos = findPos(element.offsetParent); 
    return [ 
     parentPos.X + element.offsetLeft, 
     parentPos.Y + element.offsetTop 
    ]; 
    } else { 
    return [0,0]; 
    } 
} 

Answer 6

Bạn có thể thêm hai thuộc tính cho Element.prototype để có được trên/trái của bất kỳ phần tử nào.

window.Object.defineProperty(Element.prototype, 'documentOffsetTop', { 
    get: function() { return this.offsetTop + (this.offsetParent ? this.offsetParent.documentOffsetTop : 0); } 
}); 

window.Object.defineProperty(Element.prototype, 'documentOffsetLeft', { 
    get: function() { return this.offsetLeft + (this.offsetParent ? this.offsetParent.documentOffsetLeft : 0); } 
}); 

Dưới đây là một bản demo so sánh kết quả với jQuery offset().top và .left: http://jsfiddle.net/ThinkingStiff/3G7EZ/