-->

Размер, прокрутка, координаты элемента, а также координаты курсора мышки (точки нажатия) | JavaScript

Координаты курсора мышки относительно экрана монитора, страницы или окна браузера

Демонстрация screenX/screenY, pageX/pageY, clientX/clientY

Представленные ниже свойства возвращают в px координаты курсора мышки относительно верхнего левого угла

  • экрана монитора (screenX/Y),
  • HTML-дкумента (pageX/Y),
  • области просмотра окна браузера (clientX/Y). 
<script>
window.addEventListener('click', function(e) {
  alert('screen: ' + e.screenX + 'x' + e.screenY + '\npage: ' + e.pageX + 'x' + e.pageY + '\nclient: ' + e.clientX + 'x' + e.clientY);
}, false);
</script>

Образец (щелчок по любому месту зелёного прямоугольника):

Определить элемент, который находится под курсором

document.elementFromPoint(X, Y) возвращает верхний элемент, который находится на координатах (X, Y) относительно верхнего левого угла области просмотра окна браузера. 

<script>
window.addEventListener('click', function(e) {
  alert(document.elementFromPoint(e.clientX, e.clientY).tagName);
}, false);
</script>

Образец (щелчок по любому месту зелёного прямоугольника):

Курсор находится над тегом
первый второй третий

Дополнение: этот же код применяется чтобы узнать место, куда нажал пользователь сенсорного устройства (планшет, телефон).

Координаты курсора мышки внутри элемента (div, img)

В Mozilla Firefox не работают offsetX и offsetY. Самое простое решение проблемы указано тут: 

<style>
#div {
  position: relative; /* любое значение position, кроме static */
  height: 10em;
  background: green;
}
</style>

<div id="div"></div>

<script>
document.getElementById('div').onclick = function(e) {
  var x = e.offsetX==undefined?e.layerX:e.offsetX;
  var y = e.offsetY==undefined?e.layerY:e.offsetY;
  alert(x +'x'+ y);
}
</script>

Образец (щелчок по любому месту зелёного прямоугольника):

Дополнение: этот же код применяется чтобы узнать место, куда нажал пользователь сенсорного устройства (планшет, телефон).

Координаты расположения элемента

Расстояние от верхнего/левого края окна браузера до элемента

Демонстрация getBoundingClientRect()

Метод elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера 

<style>
#div {
  height: 10em;
  background: green;
}
</style>

<div id="div"></div>

<script>
var div = document.getElementById('div');
window.addEventListener('scroll', raz, false);
window.addEventListener('resize', raz, false);
function raz() {
  var rect = div.getBoundingClientRect();
  div.innerHTML = 'top: ' + rect.top + '<br>right: ' + rect.right + '<br>bottom: ' + rect.bottom + '<br>left: ' + rect.left + '<br>width: ' + rect.width + '<br>height: ' + rect.height;
}
</script>

Образец (прокрутка или изменение окна браузера, изменение размера элемента):

elem.getBoundingClientRect().width/height поддерживаются с IE9 [developer.mozilla.org]. Кроссбраузерное решение: 

width = elem.getBoundingClientRect().right - elem.getBoundingClientRect().left
height = elem.getBoundingClientRect().bottom - elem.getBoundingClientRect().top

Практическое применение: Прилипающий при скроллинге блок

Расстояние от правого/нижнего края окна браузера до элемента

Чтобы узнать отступ справа или снизу от элемента до края области просмотра окна браузера: 

<style>
#div {
  height: 10em;
  background: green;
}
</style>

<div id="div"></div>

<script>
window.addEventListener('scroll', raz2, false);
window.addEventListener('resize', raz2, false);
function raz2() {
  var div = document.getElementById('div'),
      rect = div.getBoundingClientRect(),
      d = document.documentElement,
      rectD = d.getBoundingClientRect();
  div.innerHTML = 'top: ' + rect.top + '<br>right: ' + (rectD.right - rect.right) + '<br>bottom: ' + (d.clientHeight - rect.bottom) + '<br>left: ' + rect.left + '<br>width: ' + rect.width + '<br>height: ' + rect.height;
}
</script>

Образец (прокрутка или изменение окна браузера, изменение размера элемента):

Практическое применение: Элемент находится в видимой области окна браузера

Позиция одного элемента относительно другого

Рассчитать позицию одного элемента относительно другого (например, потомка относительно предка) можно, если получить разницу их координат (например, координаты родителя вычесть из координат дочернего элемента): 

<style>
#div {
  background: green;
}
#div sub {
  background: yellow;
}
</style>

<div id="div"><sub>Нижний индекс</sub></div>

<script>
var div = document.getElementById('div');
div.childNodes[0].innerHTML = 'Расстояние до нижнего индекса: ' + (div.childNodes[0].getBoundingClientRect().top - div.getBoundingClientRect().top) + 'px';
</script>
Нижний индекс

Смещение относительно elem.offsetParent

elem.offsetParent возвращает ближайшего родителя, имеющего position не static, если у самого элемента elem установлено position: absolute;. Положение элемента относительно elem.offsetParent показывают elem.offsetLeft/Top (IE≥8). 

<style>
#div {
  position: relative;
  height: 10em;
  background: green;
  overflow: auto;
}
#div div {
  position: absolute;
  height: 8em;
  width: 90%;
  margin: 1em 5%;
  background: yellow;
}
</style>

<div id="div">
  <div></div>
</div>

<script>
var div = document.querySelector('#div div');
div.innerHTML = 'offsetParent: ' + div.offsetParent + '<br>left: ' + div.offsetLeft + '<br>top: ' + div.offsetTop;
</script>

Размер элемента: ширина, высота, прокрутка

Демонстрация scrollWidth/Height, scrollLeft/scrollTop, offsetWidth/Height, clientLeft/Top, clientWidth/Height
ширина содержимого элементаelem.scrollWidth (IE≥8)
высота содержимого элементаelem.scrollHeight (IE≥8)
ширина элементаelem.offsetWidth
elem.getBoundingClientRect().width
высота элементаelem.offsetHeight
elem.getBoundingClientRect().height
border-left-widthelem.clientLeft
border-top-widthelem.clientTop
ширина_элемента - border-left-width - border-right-width - полоса_прокруткиelem.clientWidth
высота_элемента - border-top-width - border-bottom-width - полоса_прокруткиelem.clientHeight
горизонтальная прокрутка содержимого элементаelem.scrollLeft
вертикальная прокрутка содержимого элементаelem.scrollTop

Получить значение свойства CSS можно благодаря getComputedStyle(elem[, pseudo]). Предварительно советую ознакомиться с блочной моделью CSS. 

<style>
#div {
  height: 10em;
  padding: 1em;
  border: 1.5em solid gray;
  overflow: auto;
  resize: both;
}
#div div {
  height: 20em;
  background: yellow;
}
</style>

<div id="div">
  <div></div>
</div>

<script>
var div = document.querySelector('#div');
alert('scrollWidth x scrollHeight: ' + div.scrollWidth + 'x' + div.scrollHeight + '\nscrollLeft x scrollTop: ' + div.scrollLeft + 'x' + div.scrollTop + '\noffsetWidth x offsetHeight: ' + div.offsetWidth + 'x' + div.offsetHeight + '\ngetBoundingClientRect().width x getBoundingClientRect().height: ' + div.getBoundingClientRect().width + 'x' + div.getBoundingClientRect().height + '\nclientLeft x clientTop' + div.clientLeft + 'x' + div.clientTop + '\nclientWidth x clientHeight: ' + div.clientWidth + 'x' + div.clientHeight + '\ngetComputedStyle(elem).width x getComputedStyle(elem).height: ' + getComputedStyle(div).width + ' x ' + getComputedStyle(div).height);
</script>

Образец (щелчок по прямоугольнику с серой рамкой, его изменение или прокрутка содержимого):

Размер монитора, страницы, окна браузера: ширина, высота, прокрутка

Демонстрация screen.width/height, window.outerWidth/Height, window.innerWidth/Height, window.screenX/Y, window.scrollX/Y
разрешение экрана монитораwindow.screen.width/height
доступный размер экрана монитораwindow.screen.availWidth/Height
прокрутка (расстояние от верхнего левого угла страницы)window.scrollX/Y (без IE)
window.pageXOffset/pageYOffset (IE≥9)
document.documentElement.scrollLeft/scrollTop
document.documentElement.getBoundingClientRect().left/top
максимально возможная прокруткаwindow.scrollMaxX/Y (только Mozilla Firefox)
размер окна браузераwindow.outerWidth/Height (IE≥9)
размер области просмотра окна браузераwindow.innerWidth/Height (IE≥9)
размер области просмотра окна браузера без полосы прокруткиdocument.documentElement.clientWidth/Height
расстояние от верхнего левого угла монитора до окна браузераwindow.screenX/Y (IE≥9, см. window.screenLeft/Top)

Размер страницы, учитывающий transform и margin для <html>, который можно получить, пока страница не была прокручена. 

var rect = document.documentElement.getBoundingClientRect(),
      b = document.body,
      maxWidth = Math.max(  // ширина страницы
        rect.right, b.scrollWidth
      ),
      maxHeight = Math.max(  // высота страницы
        rect.bottom, b.scrollHeight
      );

Образец (изменение, прокрутка содержимого окна браузера):

0

Практическое применение: Открыть ссылку в новом окне заданного размера https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView https://msdn.microsoft.com/en-us/library/hh781509%28v=vs.85%29.aspx http://jsfiddle.net/zj9Rs/ https://developer.mozilla.org/ru/docs/Web/API/HTMLImageElement

в f t
наверх ↑

8 комментариев:

Анонимный
Спасибо огромное. Единственный толковый полностью рабочий пример который нашел.
Unknown
полезная штука, спс
NMitra
Благодарю на добром слове!
Unknown
Здорово! Использовал http://javascript.ru/tutorial/events/properties, но тамошний способ отказался работать на резиновом шаблоне. А этот работает! Спасибо большое!
Комиго
Идеально. Теперь я знаю, что за выпендрёж вечный с позиционированием у мазилки.
Благодарю :3

getBoundingClientRect, кстати, великолепно поддерживается даже в древнем ИЕ.
NMitra
Угу, https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect (кроме width/height).
Анонимный
Искал модальное окно, за 3 часа облазил весь инет, то то не так, то это не эдак. и забрел на старый знакомый сайт... Вот не пойму какого лешего я скитался, когда уже ни один год все ответы нахожу у Наташи на этом сайте !
Наташа, спасибо Вам за Ваше хобби, что бы мы без Вас делали... Я уж грешным делом чуть программистом не решил стать :-)
NMitra
Спасибо, давно такие комментарии не получала! А то молодёжь уж как справочник Шпаргалку воспринимает.

Отправить комментарий