Tọa độ tài liệu jQuery x y của đối tượng DOM

Question

Tôi cần nhận tọa độ X, Y (liên quan đến đầu/bên trái của tài liệu) cho phần tử DOM. Tôi không thể định vị bất kỳ plugin hoặc thuộc tính hoặc phương thức jQuery nào có thể cung cấp cho chúng tôi. Tôi có thể lấy phần trên cùng và bên trái của phần tử DOM, nhưng điều đó có thể tương ứng với vùng chứa/cha mẹ hiện tại hoặc tài liệu.

Answer 1

bạn có thể sử dụng Dimensions Plugin [Không dùng nữa ... có trong jQuery 1.3.2+]

bù đắp()
Lấy hiện tại bù đắp của phần tử xuất hiện đầu tiên, tính theo pixel, liên quan đến tài liệu .

vị trí()
Gets vị trí hàng đầu và trái của một phần tử liên quan đến bù đắp mẹ.

biết điều này, sau đó nó rất dễ dàng ... (sử dụng ít svg project như một example page của tôi)

var x = $("#wrapper2").offset().left; 
var y = $("#wrapper2").offset().top; 

console.log('x: ' + x + ' y: ' + y); 

đầu ra:

x: 53 y: 177 

hy vọng nó sẽ giúp những gì bạn đang tìm kiếm.

đây là một hình ảnh của offset() và vị trí()

sử dụng XRay

sử dụng thanh công cụ Web Developer

Answer 2

Các offset chức năng sẽ làm điều đó cho bạn.

Dưới đây là ví dụ họ đưa ra:

var p = $("p:last"); 
var offset = p.offset(); 
p.html("left: " + offset.left + ", top: " + offset.top); 

Answer 3

Giải pháp của tôi là một plugin với "cách giải quyết": + D. Nhưng hoạt động!

jQuery.fn.getPos = function(){ 
     var o = this[0]; 
     var left = 0, top = 0, parentNode = null, offsetParent = null; 
     offsetParent = o.offsetParent; 
     var original = o; 
     var el = o; 
     while (el.parentNode != null) { 
      el = el.parentNode; 
      if (el.offsetParent != null) { 
       var considerScroll = true; 
       if (window.opera) { 
        if (el == original.parentNode || el.nodeName == "TR") { 
         considerScroll = false; 
        } 
       } 
       if (considerScroll) { 
        if (el.scrollTop && el.scrollTop > 0) { 
         top -= el.scrollTop; 
        } 
        if (el.scrollLeft && el.scrollLeft > 0) { 
         left -= el.scrollLeft; 
        } 
       } 
      }    
      if (el == offsetParent) { 
       left += o.offsetLeft; 
       if (el.clientLeft && el.nodeName != "TABLE") { 
        left += el.clientLeft; 
       } 
       top += o.offsetTop; 
       if (el.clientTop && el.nodeName != "TABLE") { 
        top += el.clientTop; 
       } 
       o = el; 
       if (o.offsetParent == null) { 
        if (o.offsetLeft) { 
         left += o.offsetLeft; 
        } 
        if (o.offsetTop) { 
         top += o.offsetTop; 
        } 
       } 
       offsetParent = o.offsetParent; 
      } 
     } 
     return { 
      left: left, 
      top: top 
     }; 
    }; 

Cách sử dụng:

var p = $("#wrapper2").getPos(); 
alert("top:"+p.top+"; left:"+p.left);