Как найти расстояние от элемента до конца блока в котором этот элемент находится?

Question

[VolodymyrWork]

У меня есть модальное окно и внутри него элементы. Как я могу узнать расстояние от p до конца блока modal?

<div class="modal">
  <h1> Hi!</h1>
  <p> test </p>
  <h1> Hi! </h1>
</div>

Comments

[Сергей Сергей]

getClientRects для получения координат элементов, дальше арифметика.

Answer 1

[Rsa97]

const parentPos = document.getElementById('parent-id').getBoundingClientRect(),
const childPos = document.getElementById('child-id').getBoundingClientRect(),

const relativePos = const {
  top: childPos.top - parentPos.top,
  right: childPos.right - parentPos.right,
  bottom: childPos.bottom - parentPos.bottom,
  left: childPos.left - parentPos.left,
};

Comments

[VolodymyrWork]

Ваше решение работает не совсем корректно, поскольку значение считается не так как мне нужно.
https://developer.mozilla.org/ru/docs/Web/API/Elem...

[Rsa97]

VolodymyrWork, Так вы и не написали "как вам нужно".

[VolodymyrWork]

Rsa97,
Мне нужно узнать расстояние от конца второго элемента на картинке до конца родительского элемента.
Я знаю высоту родительского элемента, но не знаю как посчитать высоту от конца родительского элемента до конца дочернего элемента внутри.

[Rsa97]

VolodymyrWork, Очевидно. Через getBoundingClientRect получаете параметры box'ов родительского и дочернего элементов, находите разность bottom'ов.