Парочка полезных элементов из DOM: elementFromPoint and getBoundingClientRect

Я честно говоря не знал о них, а зря. На деле они оказались довольно полезными, особенно getBoundingClientRect. О нём и расскажу в первую очередь.

getBoundingClientRect

Метод который присутствует у любого DOM узла. Возвращает объект со следующими свойствами:

bottom – координата нижней границы блока, отсчёт от верхней границы viewport.
top – координата верхней границы блока, отсчёт так же как и для bottom
height – высота блока в px (равняется bottom – top)
left – кордината левой границы блока, другими словами количество пикселей от самого левого края viewport
right – кордината правой границы блока, отсчёт так же от левого края экрана
width – ширина блока в px (равняется right – left)

P.S. Естественно вы должны понимать, если это блочный элемент, и в нём нет элементов из нормального потока, то высота будет 0, а ширина равная разрешению.

elementFromPoint

Применив этот метод вы узнаете какой элемент находится по заданным координатам. Точнее говоря какой самый верхний элемент. Другими словами, если вы спозиционировали два элемента друг на друга, то этот метод покажет какой элемент стоит в верху. Работает и для SVG элементов.

Вам может пригодиться аналог этого метода – getElementsFromPoint, который работает похожим образом, но возвращает массив значений.

Leave a Reply

Your email address will not be published. Required fields are marked *