Измерение расстояния между центрами двух HTML-элементов

Если у меня есть HTML-элементы следующим образом:

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

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

...как найти расстояние между ними в пикселях с помощью JavaScript?

12
distance html javascript

2 ответов

получить их позиции и использовать теорему Пифагора, чтобы определить расстояние между ними...

(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.

теорема Пифагора относится к отношениям между сторонами прямоугольного треугольника.

Pythagorean Theorem

элементы нанесены на декартова система координат (С началом в левом верхнем углу), поэтому вы можете представить прямоугольный треугольник между координатами элементов (неизвестная сторона-гипотенуза).

вы можете изменить уравнение, чтобы получить значение c получив квадратный корень из другой стороны.

Distance equation

затем вы просто подключаете значения (x и y являются различия между элементами, как только их центры определены), и вы найдете длину гипотенузы, которая является расстоянием между элементами.

24

поскольку div теперь пусты, основная идея состоит в том, чтобы измерить расстояние между их левыми верхними углами

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

но вы должны сначала вычесть div высота и ширина, если вы положили что-то внутрь. Этот метод имеет некоторые проблемы с поддержкой и шириной границ элементов в разных браузерах.

в любом случае взглянем на Скрипка

обратите внимание, что даже с контентом (если вы не измените его с помощью css) divs будет 100% ширина, так что если вы хотите просто измерить brиспользование высоты:

distance = = y.offsetTop - x.offsetTop;
0