Đo khoảng cách giữa các trung tâm yếu tố hai HTML

Question

Nếu tôi có các phần tử HTML như sau:

<div id="x"></div> 

<div id="y" style="margin-left:100px;"></div> 

... làm thế nào để tìm ra khoảng cách giữa chúng bằng pixel sử dụng JavaScript?

Answer 1

Nhận vị trí của họ, và sử dụng Định lý Pythagore để xác định khoảng cách giữa chúng ...

(function() { 

    var getPositionAtCenter = function (element) { 
     var data = element.getBoundingClientRect(); 
     return { 
      x: data.left + data.width/2, 
      y: data.top + data.height/2 
     }; 
    }; 

    var getDistanceBetweenElements = function(a, b) { 
     var aPosition = getPositionAtCenter(a); 
     var bPosition = getPositionAtCenter(b); 

     return Math.sqrt(
      Math.pow(aPosition.x - bPosition.x, 2) + 
      Math.pow(aPosition.y - bPosition.y, 2) 
     ); 
    }; 

    var distance = getDistanceBetweenElements(document.getElementById("x"), 
               document.getElementById("y")); 

})(); 

jsFiddle.

Định lý Pythagore liên quan đến mối quan hệ giữa các cạnh của tam giác vuông góc bên phải.

Các yếu tố được vẽ trên một Cartesian coordinate system (có nguồn gốc ở phía trên bên trái), vì vậy bạn có thể tưởng tượng một tam giác vuông góc giữa tọa độ của các yếu tố (bên chưa biết là cạnh huyền).

Bạn có thể sửa đổi phương trình để lấy giá trị c bằng cách lấy căn bậc hai của phía bên kia.

Sau đó, bạn chỉ cần cắm các giá trị trong (các x và y là những khác biệt giữa các yếu tố một lần trung tâm của họ được xác định) và bạn sẽ tìm thấy chiều dài của cạnh huyền, đó là khoảng cách giữa các các yếu tố.

Answer 2

như xa như div bây giờ đang trống rỗng, ý tưởng cơ bản là để đo khoảng cách giữa các góc trên bên trái của họ

distX = y.offsetLeft - x.offsetLeft; 
distY = y.offsetTop - x.offsetTop; 
distance = Math.sqrt(distX*distX + distY*distY); 
alert(Math.floor(distance)); 

nhưng bạn phải trừ đi chiều cao đầu tiên div 's và chiều rộng, nếu bạn đặt một cái gì đó bên trong . Phương pháp này có một số vấn đề với hỗ trợ và chiều rộng đường viền của các phần tử trong các trình duyệt khác nhau.

nào hãy nhìn vào Fiddle

Note, mà ngay cả với nội dung (nếu bạn không thay đổi nó với css) divs sẽ là 100% chiều rộng, vì vậy nếu bạn muốn chỉ để đo br 's sử dụng chiều cao:

distance = = y.offsetTop - x.offsetTop;