Lấy vị trí của phần tử bằng javascript

Question

Tôi đã nhìn thấy một tá tập lệnh có thể nắm bắt vị trí x và y của một phần tử/đối tượng trong trang. Nhưng tôi luôn gặp sự cố khi bắt dấu x và y khi trang web đang sử dụng lề trong phần thân hoặc các phần tử khác, các yếu tố tuyệt đối/tương đối, chẳng hạn như vậy.

Có một giải pháp cung cấp vị trí chính xác hay không, bất kể lề hoặc miếng đệm được sử dụng là gì.

:)

Answer 1

tôi sử dụng mã sau đây để di chuyển div hộp đi theo con trỏ trong này Web IME site

function xy(x) { 
    o = document.getElementById(x); 
    var l =o.offsetLeft; var t = o.offsetTop; 
    while (o=o.offsetParent) 
     l += o.offsetLeft; 
    o = document.getElementById(x); 
    while (o=o.offsetParent) 
     t += o.offsetTop; 
    return [l,t]; 
} 

nó trả về một mảng [left, top],

Answer 2

Lấy vị trí chính xác là chỉ cần thêm offsetLefts và offsetTops đệ quy vào offsetParents:

function getPos(ele){ 
    var x=0; 
    var y=0; 
    while(true){ 
     x += ele.offsetLeft; 
     y += ele.offsetTop; 
     if(ele.offsetParent === null){ 
      break; 
     } 
     ele = ele.offsetParent; 
    } 
    return [x, y]; 
} 

Btw, giải pháp này có thể chạy nhanh hơn hai lần so với the other solution above vì chúng tôi chỉ lặp lại một lần.

Answer 3

mã bạn là hết sức tồi tệ, và tôi đã một số cải tiến trên Pacerier để cung cấp cho, vì vậy tôi sẽ gửi câu trả lời của riêng tôi:

function getPos(el, rel) 
{ 
    var x=0, y=0; 
    do { 
     x += el.offsetLeft; 
     y += el.offsetTop; 
     el = el.offsetParent; 
    } 
    while (el != rel) 
    return {x:x, y:y}; 
} 

Nếu chỉ được sử dụng như getPos(myElem) sẽ trở lại vị trí toàn cầu. Nếu phần tử thứ hai được bao gồm làm đối số (tức là getPos(myElem, someAncestor)) là tổ tiên/cha mẹ của người đầu tiên (ít nhất là ở đâu đó trong chuỗi) thì nó sẽ cung cấp vị trí liên quan đến tổ tiên đó. Nếu rel không nhất định (ví dụ còn lại undefined), sau đó nó cố tình sử dụng != thay vì !== vì nó nên dừng lại khi el được cho null và rel là undefined là tốt, vì thế bình đẳng không nghiêm ngặt là có mục đích, không thay đổi nó . Nó cũng trả về một đối tượng, vì đó là một chút dễ đọc hơn trong việc sử dụng hơn một mảng (và vì vậy bạn có thể làm một cái gì đó như getPos().x).

Điều này có nguồn gốc từ giải pháp của Pacerier, vì vậy nếu bạn sẽ upvote điều này, hãy xem xét upvoting của mình quá.

Answer 4

offsetParent và khác bù đắp chức năng cũ ... sử dụng chức năng getBoundingClientRect ... sử dụng này:

function getAbsPosition(element) { 
    var rect = element.getBoundingClientRect(); 
    return {x:rect.left,y:rect.top} 
} 

bây giờ bạn có thể sử dụng nó như thế này

<div style="margin:50px;padding:50px;" id="myEl">lol</div> 
<script type="text/javascript"> 
    var coords = getAbsPosition(document.getElementById('myEl')); 
    alert(coords.x);alert(coords.y); 
</script> 

Đừng lo lắng ... không có vấn đề bao nhiêu lề hoặc vị trí hoặc phần tử đệm có, nó luôn hoạt động