cách tìm tọa độ của nút hoặc hình ảnh HTML, trình duyệt chéo?

Question

Có một chủ đề về vấn đề này trong thời gian gần đây comp.lang.javascript nơi chiến thắng đã được công bố nhưng không có mã số đã được đăng:

Trên một trang HTML làm thế nào để bạn tìm tọa độ dưới bên trái góc của một phần tử (hình ảnh hoặc nút , giả sử) đáng tin cậy trên các trình duyệt và kiểu trang? Phương thức được ủng hộ trong "Ajax in Action" (bản sao tôi có) dường như không hoạt động trong IE trong một số trường hợp. Để làm cho vấn đề trở nên dễ dàng hơn, chúng ta hãy giả định rằng chúng ta có thể thiết lập kiểu tài liệu toàn cục là "truyền thống" hoặc "chuyển tiếp" hay bất kỳ thứ gì.

Vui lòng cung cấp mã hoặc con trỏ để viết mã (một chức năng hoàn chỉnh hoạt động trên tất cả các trình duyệt) - không chỉ nói "thật dễ dàng" và nói về những gì lướt qua DOM - nếu tôi muốn đọc loại đó về điều tôi sẽ quay lại comp.lang.javascript. Xin vui lòng mắng tôi nếu đây là một lặp lại và chỉ cho tôi giải pháp - Tôi đã cố gắng để tìm thấy nó.

Answer 1

Theo kinh nghiệm của tôi, chỉ chắc chắn lửa cách để có được những thứ như thế này để làm việc được sử dụng JQuery (đừng sợ , nó chỉ là một tập tin kịch bản bên ngoài bạn phải bao gồm). Sau đó, bạn có thể sử dụng một tuyên bố như

$('#element').position() 

hoặc

$('#element').offset() 

để lấy tọa độ hiện nay, hoạt động xuất sắc qua bất kỳ và tất cả các trình duyệt tôi đã gặp cho đến nay.

Answer 2

Hãy thử điều này:

var elm = document.getElementById('foo'); 
var point = {x:0,y:elm.offsetHeight}; // Change to y:0 to get the top-left 

while (elm) 
{ 
    // This will get you the position relative to the absolute container, 
    // which is what you need for positioning an element within it 
    if (elm.style.position == 'absolute') 
     break; 

    point.x += elm.offsetLeft; 
    point.y += elm.offsetTop; 

    elm = elm.offsetParent; 
} 

Answer 3

Trong jQuery:

var jq = $('#yourElement'); 
var position = jq.offset(); 
alert('x: ' + position.left + ', y: ' + position.top); 

var bottomLeftPixelPosition = 
    { left: position.left, top: position.top + jq.height() - 1; }; 

Answer 4

Tôi đã sử dụng tính năng này, hoạt động cho cả IE và Firefox.

 
var Target = document.getElementById('SomeID'); 
var Pos = findPos(Target); 

AnotherObj = document.getElementById('AnotherID'); 
AnotherObj .style.top = Pos[1] + "px"; 
AnotherObj .style.left = Pos[0] + "px"; 

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

Answer 5

Tôi đã tìm thấy giải pháp này từ web ... Đã giải quyết hoàn toàn vấn đề của tôi. Vui lòng kiểm tra liên kết này để tìm nguồn gốc. http://www.quirksmode.org/js/findpos.html

/** This script finds the real position, 
* so if you resize the page and run the script again, 
* it points to the correct new position of the element. 
*/ 
function findPos(obj){ 
    var curleft = 0; 
    var curtop = 0; 

    if (obj.offsetParent) { 
     do { 
     curleft += obj.offsetLeft; 
     curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 

     return {X:curleft,Y:curtop}; 
    } 
} 

hoạt động hoàn hảo trong Firefox, IE8, Opera (Hope ở người khác quá) Nhờ có những người chia sẻ kiến ​​thức của họ ... Kính trọng,

ADynaMic