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 є корисним інструментом для роботи з розмірами та позиціонуванням елементів на веб-сторінці, особливо при створенні динамічних інтерфейсів та анімацій.
| Порада: | Властивість |
| Порада: | Пам'ятайте, що властивість |
| Порада: | При використанні |
Синтаксис
Element.offsetHeightЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
3 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі ми демонструємо використання властивості offsetHeight для відстеження висоти елемента контейнера. Спочатку ми задаємо максимальну висоту контейнера в 100 пікселів та приховуємо переповнення за допомогою CSS. Потім ми отримуємо посилання на потрібні елементи в JavaScript.
Функція updateHeight обчислює поточну висоту контейнера за допомогою container.offsetHeight та оновлює відображення висоти на сторінці.
При натисканні на кнопку "Збільшити висоту" ми додаємо новий абзац до контенту контейнера, що збільшує його висоту. Після цього ми знову викликаємо updateHeight для оновлення відображення висоти.
У цьому прикладі ми створюємо функцію adjustElementHeight, яка обмежує висоту HTML-елемента заданим максимальним значенням та додає вертикальний скролінг, якщо поточна висота перевищує це значення. Функція приймає два аргументи: elementId (ідентифікатор елемента) та maxHeight (максимальна висота в пікселях). Спочатку ми знаходимо елемент за його ідентифікатором та зберігаємо його поточну висоту у змінній currentHeight. Потім ми перевіряємо, чи поточна висота перевищує задану максимальну висоту. Якщо так, ми встановлюємо висоту елемента до maxHeight та додаємо вертикальний скролінг за допомогою властивості overflowY. Якщо ж поточна висота не перевищує максимальну, ми просто виводимо повідомлення у консоль. Важливо зазначити, що ця функція змінює стилі елемента безпосередньо через JavaScript, що може бути корисним для динамічного налаштування висоти елементів.
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.`);
}
}У цьому прикладі ми отримуємо висоту HTML-елемента за допомогою властивості offsetHeight. Спочатку ми знаходимо елемент за його ідентифікатором за допомогою document.getElementById('myElement'). Потім ми зберігаємо значення offsetHeight цього елемента у змінну height. Нарешті, ми виводимо висоту елемента в пікселях у консоль за допомогою console.log().
const element = document.getElementById('myElement');
const height = element.offsetHeight;
console.log(`Висота елемента: ${height}px`);