Получение координат элемента относительно его родителя в JavaScript можно выполнить с помощью следующего кода:
function getElementPosition(element) { var parentElement = element.offsetParent; var position = { top: element.offsetTop, left: element.offsetLeft }; while (parentElement) { position.top += parentElement.offsetTop; position.left += parentElement.offsetLeft; parentElement = parentElement.offsetParent; } return position; } // Пример использования var element = document.getElementById("myElement"); var position = getElementPosition(element); console.log("Координаты элемента относительно его родителя: { top: " + position.top + ", left: " + position.left + " }");
Этот код работает следующим образом:
1. Создаём функцию getElementPosition
, которая принимает элемент в качестве аргумента.
2. Создаём переменную parentElement
, которая содержит родительский элемент исходного элемента, используя свойство offsetParent
.
3. Создаём объект position
, который будет содержать координаты элемента.
4. Задаём начальные координаты исходного элемента, используя свойства offsetTop
и offsetLeft
.
5. В цикле проверяем, существует ли родительский элемент.
6. Если родительский элемент существует, прибавляем его отступы по верхней и левой стороне к значениям координат position.top
и position.left
соответственно.
7. Обновляем значение переменной parentElement
, получая родительский элемент текущего элемента с помощью свойства offsetParent
.
8. Возвращаем объект position
с координатами элемента относительно его родителя.
9. Пример использования функции: получаем элемент по его id с помощью document.getElementById
, затем вызываем функцию getElementPosition
с передачей этого элемента как аргумента.
10. Выводим в консоль координаты элемента относительно его родителя, используя свойства объекта position
.
Обратите внимание, что данная функция предоставляет координаты элемента относительно его непосредственного родителя. Если вам нужно получить координаты элемента относительно документа, вам следует модифицировать код. Вместо использования свойств offsetTop
и offsetLeft
вы можете использовать свойства getBoundingClientRect().top
и getBoundingClientRect().left
.