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

Ответ 1

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

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

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

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

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

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

Ответ 2

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

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

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

в любом случае взгляните на Fiddle

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

distance = = y.offsetTop - x.offsetTop;