Метод getBoundingClientRect

Метод getBoundingClientRect возвращает объект координат элемента.

Координаты рассчитываются относительного видимой части страницы без учета прокрутки (относительно окна). То есть как при position: fixed.

В возвращаемом объекте содержатся свойства: left, top, right, bottom. Стоит отметить, что эти свойства не имеют ничего общего с CSS свойствами. В них содержатся расстояния до соответствующих сторон элемента. Для left/right - от левой границы видимой области страницы, а для top/bottom - верхней.

См. также elemFromPoint, scrollTo, scrollBy, pageXOffset.

Синтаксис

элемент.getBoundingClientRect();

Примеры

Пример

При клике по кнопке разместим под ней новый элемент (с position:fixed) и удалим его через 3 секунды:

<input type="button" value="Нажмите на кнопку" id="button">

var button = document.getElementById('button');

button.addEventListener('click', function() {
	var newEl = getNewEl();
	document.body.appendChild(newEl);

	setTimeout(function() {
		document.body.removeChild(newEl);
	}, 3000);
});

function getNewEl() {
	var xy = button.getBoundingClientRect();
	var newEl = document.createElement('div');
	newEl.innerHTML = 'Новый элемент';
	newEl.style.cssText = 'position:fixed;'
 		+ 'border: 1px solid #000;' 
		+ 'left:' + xy.left + 'px;'
		+ 'top:' + (xy.bottom + 1) + 'px;';

	return newEl;
}