Измерение высоты с помощью .offset для .lastElementChild

[Filinvit]

В javascript-коде мне нужно для последнего элемента (абзаца <p> или картинки <img>) в слое <div> измерить нижнюю координату.

Фрагмент js-скрипта:

//в переменную LastChildOfMainContentBorder записываем последний дочерний элемент слоя .border, находящегося в слое .main-content в слое .main
var LastChildOfMainContentBorder = document.querySelector("div.main .main-content .border").lastElementChild.innerHTML;

//вносим в переменную LastChildOfMainContentBorderHeight высоту последнего дочернего элемента этого слоя
var LastChildOfMainContentBorderHeight = document.querySelector("div.main .main-content .border").lastElementChild.innerHTML.offsetBottom;

//вывод инфы для отладки
alert ("LastChildOfMainContentBorder = " + LastChildOfMainContentBorder + "\n" + "LastChildOfMainContentBorderHeight = " + LastChildOfMainContentBorderHeight);


//alert выдает в качестве последнего дочернего элемента картинку (да, такая и есть), но ее координаты почему-то undefined:
/*
LastChildOfMainContentBorder = <img width = "550px" src = "..\Pictures for HORT text\Druid_night_tree.jpg">
LastChildOfMainContentBorderHeight = undefined
*/

Аналогично координаты и высота undefined, если я вместо .offsetBottom подставляю .offsetTop или .offsetHeight.
Я так понимаю, что я неправильно, не в том виде, каком надо, передаю данные в переменную. А как сделать правильно?
Мне в скрипте предстоит сравнивать высоту с другой высотой и при необходимости корректировать, после чего задавать ее нужному слою.

[j0hnik]

var LastChildOfMainContentBorder = document.querySelector("div").lastElementChild.innerHTML;
var LastChildOfMainContentBorderHeight = document.querySelector("div").lastElementChild.getBoundingClientRect().bottom;
alert ("LastChildOfMainContentBorder = " + LastChildOfMainContentBorder + "\n" + "LastChildOfMainContentBorderHeight = " + LastChildOfMainContentBorderHeight);

[Filinvit]

j0hnik, спасибо. Для селектора по последнему дочернему элементу работает.

Только координата меняется от прокрутки страницы, а надо от некой фиксированной точки - в идеале или от верха родительского слоя <div>, или от верха страницы. Для этого рекомендуют использовать window.pageYOffset. Только я не пойму, как его приставить к .getBoundingClientRect().bottom и где указывать нулевую прокрутку?


Еще почему то .getBoundingClientRect().bottom не пашет так:

var MainContentBottom = document.querySelector("div.main .main-content").getBoundingClientRect().bottom;

Ведь document.querySelector("div.main .main-content") уже задает полноценный элемент, т.е. <div> с сlass="main-content", и для него должна вычисляться координата. В чем же баг?

[j0hnik]

var el = document.querySelector("div.main .main-content");
alert (el.offsetTop + el.offsetHeight)

отступ по нижней границы относительно родителя с position:relative

[Filinvit]

Только координата меняется от прокрутки страницы, а надо от некой фиксированной точки - в идеале или от верха родительского слоя <div>, или от верха страницы. Для этого рекомендуют использовать window.pageYOffset. Только я не пойму, как его приставить к .getBoundingClientRect().bottom и где указывать нулевую прокрутку?

Кажется, я понял, как эту часть реализовать. Я себе совсем иначе представлял принцип работы этой функции, а оказалось просто:

var LastChildOfMainContentBorderBottom = window.pageYOffset + document.querySelector("div.main .main-content .border").lastElementChild.getBoundingClientRect().bottom;

window.pageYOffset - измеряет, на сколько прокручена страница по-вертикали.
document.querySelector("div.main .main-content .border").lastElementChild.getBoundingClientRect() .bottom; - измеряет нижнюю координату слоя div с классом border относительно окна просмотра (верхнего левого угла, если я правильно понял?).

Каждая из этих функций в зависимости от прокрутки страницы дает разный результат. Но их сумма одинакова, как бы не была прокручена страница, и является вертикальной координатой низа слоя с классом border относительно верха окна, что мне и нужно.

[j0hnik]

(верхнего левого угла, если я правильно понял?).

почему левого? просто от верхней границы