Размер и координаты элемента

Размеры элемента

В JavaScript иногда нужно узнать размеры элемента. Использовать для этого CSS свойства неудобно, потому что они не всегда содержат нужную информацию. Для этих целей используются свойства DOM объектов. Они содержат размеры элементов в пикселях. Но они позволяют только получить размеры. Если нужно их изменить, то меняются CSS свойства элемента.

Свойства offsetHeight и offsetWidth содержат общие высоту и ширину элемента вместе с рамкой.

Для примера создадим страницу с таким блоком:

Стиль:

div
  {
  padding: 20px;
  border: 10px solid Blue;
  }

HTML код:

<div>Текст в блоке</div>

Получим размеры этого блока:

JavaScript:

let div = document.querySelector('div');
console.log('Высота блока ' + div.offsetHeight);
console.log('Ширина блока ' + div.offsetWidth);

Свойства clientHeight и clientWidth содержат размеры блока без рамки. Они включают содержимое и внутренние отступы.

Эти свойства показывают реальный размер содержимого. Они не всегда соответствуют CSS свойствам элемента. Если элемент имеет полосу прокрутки, то она занимает определённое место внутри содержимого и не входит в свойства clientHeight и clientWidth.

Получим размеры контента для созданного ранее блока:

console.log('Высота содержимого ' + div.clientHeight);
console.log('Ширина содержимого ' + div.clientWidth);

Координаты элемента

Координаты элементов в JavaScript расчитываются в пикселях и отмеряются от верхнего левого угла. Для получения координат относительно окна браузера используется метод getBoundingClientRect(). Он возвращает объект, содержащий координаты элемента. Объект имеет такие свойства:

top - координата Y верхнего края элемента

left - координата X левого края элемента

bottom - координата Y нижнего края элемента

right - координата X правого края элемента

Эти координаты похожи на те, которые задаются при фиксированном позиционировании элемента. Однако, между ними есть важное отличие. Левые и верхние координаты определяются одинаково, поэтому совпадают. А вот нижние и правые координаты определяются по-разному. При позиционировании правая координата отсчитывается от правого края окна. А при определении координат правая координата отсчитывается от левого края окна. То же самое относится и к нижней координате. При позиционировании отсчёт производится от нижнего края окна, а при определении координат отсчёт производится от верхнего края окна.

Если страница уже прокручена, и элемент находится выше или левее окна браузера, то координаты могу иметь отрицательные значения.

Не забывайте, что в большинстве браузеров страница имеет отступы от границ окна. Если эти отступы не отменены, то даже первый элемент на странице сначала имеет не нулевые координаты.

Определим координаты блока:

let coord = div.getBoundingClientRect();
console.log('Левый край '+coord.left);
console.log('Верхний край '+coord.top);