Измерение высоты с помощью .offset для .lastElementChild
В 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. Я так понимаю, что я неправильно, не в том виде, каком надо, передаю данные в переменную. А как сделать правильно? Мне в скрипте предстоит сравнивать высоту с другой высотой и при необходимости корректировать, после чего задавать ее нужному слою. |
var LastChildOfMainContentBorder = document.querySelector("div").lastElementChild.innerHTML;
var LastChildOfMainContentBorderHeight = document.querySelector("div").lastElementChild.getBoundingClientRect().bottom;
alert ("LastChildOfMainContentBorder = " + LastChildOfMainContentBorder + "\n" + "LastChildOfMainContentBorderHeight = " + LastChildOfMainContentBorderHeight);
|
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", и для него должна вычисляться координата. В чем же баг? |
var el = document.querySelector("div.main .main-content");
alert (el.offsetTop + el.offsetHeight)
отступ по нижней границы относительно родителя с position:relative |
Цитата:
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 относительно верха окна, что мне и нужно. |
Цитата:
|
| Часовой пояс GMT +3, время: 01:39. |