Метод 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;
}
Результат выполнения кода: