JS властивість Element.offsetHeight

Загальний опис

offsetHeight є властивістю об'єкта HTML-елемента, яка повертає висоту елемента в пікселях, враховуючи вертикальні відступи, горизонтальні смуги прокрутки та рамки. Ця властивість корисна для визначення розмірів елементів, особливо при створенні динамічних інтерфейсів та анімацій, а також для розрахунку позиціонування елементів на веб-сторінці.

Властивість offsetHeight можна використовувати для отримання висоти будь-якого HTML-елемента, включно з <div>, <p>, <img> та іншими. Вона повертає числове значення, яке відображає загальну висоту елемента з урахуванням вертикальних відступів, горизонтальних смуг прокрутки та рамок. Наприклад, розглянемо наступний HTML-код:

<div id="myDiv" style="padding: 10px; border: 2px solid black;">Це елемент div</div>

Щоб отримати висоту цього елемента div, можна використати JavaScript:

const myDiv = document.getElementById('myDiv');
const divHeight = myDiv.offsetHeight;
console.log(divHeight); // Виведе висоту елемента div з урахуванням відступів та рамок

Властивість offsetHeight особливо корисна при роботі з динамічними елементами, розміри яких можуть змінюватися залежно від вмісту або інших факторів. Наприклад, можна використати offsetHeight для автоматичного розрахунку висоти елемента відповідно до його вмісту:

const myDiv = document.getElementById('myDiv');
myDiv.style.height = `${myDiv.offsetHeight}px`;

Цей код встановлює висоту елемента div рівною його фактичній висоті, включаючи відступи та рамки.

Властивість offsetHeight також часто використовується для перевірки, чи елемент видимий на екрані, або для визначення, чи перетинається він з іншими елементами. Наприклад, можна перевірити, чи елемент знаходиться повністю в межах видимої області веб-сторінки:

const myDiv = document.getElementById('myDiv');
const viewportHeight = window.innerHeight;
const divTop = myDiv.getBoundingClientRect().top;
const divBottom = divTop + myDiv.offsetHeight;

if (divTop >= 0 && divBottom <= viewportHeight) {
  console.log('Елемент повністю видимий');
} else {
  console.log('Елемент частково або повністю невидимий');
}

У цьому прикладі ми використовуємо offsetHeight разом з getBoundingClientRect() та window.innerHeight для визначення, чи знаходиться елемент div повністю в межах видимої області веб-сторінки.

Загалом, властивість offsetHeight є корисним інструментом для роботи з розмірами та позиціонуванням елементів на веб-сторінці, особливо при створенні динамічних інтерфейсів та анімацій.

правити

Порада

Пам'ятайте, що властивість offsetHeight повертає висоту елемента в пікселях. Якщо вам потрібно працювати з іншими одиницями вимірювання, наприклад, з відсотками або rem, вам доведеться виконати додаткові перетворення.

автор: Bond правити

Порада

При використанні offsetHeight для елементів з display: none або елементів, які візуально не відображаються, значення offsetHeight буде дорівнювати 0. Щоб отримати справжню висоту прихованого елемента, вам доведеться тимчасово зробити його видимим, наприклад, змінивши display на block або inline-block.

автор: Bond правити

Порада

Властивість offsetHeight часто використовується для перевірки, чи елемент видимий на екрані або чи перетинається він з іншими елементами. Це можна зробити, порівнюючи значення offsetHeight з координатами елемента та розмірами вікна:

const myDiv = document.getElementById('myDiv');
const viewportHeight = window.innerHeight;
const divTop = myDiv.getBoundingClientRect().top;
const divBottom = divTop + myDiv.offsetHeight;

if (divTop >= 0 && divBottom <= viewportHeight) {
  console.log('Елемент повністю видимий');
} else {
  console.log('Елемент частково або повністю невидимий');
}

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Element.offsetHeight

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	3	8	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<div id="myElement">Демонстраційний елемент</div>

const element = document.getElementById('myElement');
const height = element.offsetHeight;
console.log(`Висота елемента: ${height}px`);

function adjustElementHeight(elementId, maxHeight) {
  const element = document.getElementById(elementId);
  const currentHeight = element.offsetHeight;

  if (currentHeight > maxHeight) {
    element.style.height = `${maxHeight}px`;
    element.style.overflowY = 'scroll';
    console.log(`Висота елемента "${elementId}" була обмежена до ${maxHeight}px та додано вертикальний скролінг.`);
  } else {
    console.log(`Висота елемента "${elementId}" (${currentHeight}px) не перевищує максимальну висоту ${maxHeight}px.`);
  }
}