JS властивість Element.offsetParent
Загальний опис
offsetParent - це властивість об'єкта HTMLElement, яка повертає найближчого батьківського елемента, що відображається на сторінці і має позиціонування, визначене за допомогою CSS властивостей position: relative, position: absolute або position: fixed. Ця властивість корисна для визначення відносного розташування елементів на веб-сторінці та для роботи з їх координатами.
Властивість offsetParent часто використовується разом з властивостями offsetTop та offsetLeft для обчислення абсолютних координат елемента відносно його батьківського елемента з позиціонуванням. Якщо жоден із батьківських елементів не має позиціонування, то властивість offsetParent повертає корінний елемент документа, тобто <html>.
Розглянемо приклад використання offsetParent:
<div id="parent" style="position: relative; width: 500px; height: 300px; background-color: lightgray;">
<div id="child" style="width: 200px; height: 100px; background-color: lightgreen;"></div>
</div>
const childElement = document.getElementById('child');
const parentElement = childElement.offsetParent;
console.log(parentElement); // Виведе <div id="parent">
console.log(childElement.offsetTop); // Виведе 0 (відступ зверху відносно батьківського елемента)
console.log(childElement.offsetLeft); // Виведе 0 (відступ зліва відносно батьківського елемента)
У цьому прикладі, offsetParent дитячого елемента #child є елемент #parent, оскільки він має position: relative. Властивості offsetTop та offsetLeft повертають відступи дитячого елемента відносно його батьківського елемента з позиціонуванням.
Властивість offsetParent також корисна для роботи з абсолютно позиціонованими елементами:
<div id="container" style="position: relative; width: 600px; height: 400px; background-color: lightgray;">
<div id="absolute" style="position: absolute; top: 50px; left: 100px; width: 200px; height: 100px; background-color: lightgreen;"></div>
</div>
const absoluteElement = document.getElementById('absolute');
const containerElement = absoluteElement.offsetParent;
console.log(containerElement); // Виведе <div id="container">
console.log(absoluteElement.offsetTop); // Виведе 50 (відступ зверху відносно батьківського елемента)
console.log(absoluteElement.offsetLeft); // Виведе 100 (відступ зліва відносно батьківського елемента)
У цьому випадку, offsetParent абсолютно позиціонованого елемента #absolute є елемент #container, оскільки він має position: relative. Властивості offsetTop та offsetLeft повертають відступи абсолютно позиціонованого елемента відносно його батьківського елемента з позиціонуванням.
Варто зазначити, що якщо батьківський елемент має display: none або visibility: hidden, то властивість offsetParent повертатиме null. Крім того, якщо елемент або його батьківські елементи мають transform або filter властивості, які змінюють їх розміри або положення, то значення offsetTop та offsetLeft можуть бути некоректними.
- Порада
-
Пам'ятайте, що властивість
автор: BondoffsetParentповертаєnull, якщо елемент або його батьківські елементи маютьdisplay: noneабоvisibility: hidden. У таких випадках ви не зможете отримати коректні координати елемента. Перевіряйте значенняoffsetParentперед використанням координат. - Порада
-
Якщо ви працюєте з елементами, які мають властивості
автор: Bondtransformабоfilter, що змінюють їх розміри або положення, будьте обережні з використанням властивостейoffsetTopтаoffsetLeft. Значення цих властивостей можуть бути некоректними для трансформованих або фільтрованих елементів. У таких випадках можна розглянути альтернативні способи обчислення координат, наприклад, використовуючиgetBoundingClientRect(). - Порада
-
Для досвідчених програмістів: якщо ви працюєте з складними ієрархіями елементів, де можуть бути різні типи позиціонування, розгляньте можливість створення рекурсивної функції для пошуку найближчого батьківського елемента з позиціонуванням. Це може бути корисним для забезпечення коректної роботи з координатами елементів у різних сценаріях. Наприклад:
автор: Bondfunction findOffsetParent(element) { if (!element) return null; const { position } = window.getComputedStyle(element); if (position === 'relative' || position === 'absolute' || position === 'fixed') { return element; } return findOffsetParent(element.parentElement); }
Синтаксис
Element.offsetParentПереглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 8 | 12 | 5.5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
У цьому складнішому прикладі ми використовуємо властивість offsetParent для правильного позиціонування елемента відносно найближчого батьківського елемента з позиціонуванням. Це може бути корисним, наприклад, для створення вспливаючих вікон або елементів, які повинні розташовуватися відносно певного контейнера.
HTML
<div id="myElement">Демонстраційний елемент</div>JS
// Отримуємо елемент, який нас цікавить
const myElement = document.getElementById('myElement');
// Знаходимо його найближчого батьківського елемента з позиціонуванням
const offsetParent = myElement.offsetParent;
// Обчислюємо координати відносно вікна
const rect = myElement.getBoundingClientRect();
// Обчислюємо координати відносно батьківського елемента з позиціонуванням
const relativeLeft = rect.left - offsetParent.offsetLeft;
const relativeTop = rect.top - offsetParent.offsetTop;
// Позиціонуємо елемент відносно батьківського елемента з позиціонуванням
myElement.style.left = `${relativeLeft}px`;
myElement.style.top = `${relativeTop}px`;
// Важливо: Якщо батьківський елемент з позиціонуванням має transformацію,
// необхідно врахувати її при обчисленні координатУ цьому прикладі ми використовуємо властивість offsetParent для визначення найближчого батьківського елемента, який є частиною розмітки сторінки та має position зі значенням, відмінним від static. Це може бути корисним для правильного позиціонування елементів відносно їхніх батьківських елементів.
HTML
<div id="myElement">Демонстраційний елемент</div>JS
// Отримуємо елемент, який нас цікавить
const myElement = document.getElementById('myElement');
// Знаходимо його найближчого батьківського елемента з позиціонуванням
const offsetParent = myElement.offsetParent;
// Виводимо назву тегу та розташування цього елемента
console.log(`Найближчий батьківський елемент з позиціонуванням: ${offsetParent.tagName}, left: ${offsetParent.offsetLeft}, top: ${offsetParent.offsetTop}`);Цей приклад демонструє використання властивості offsetParent для знаходження найближчого батьківського елемента, який позиціонований. У прикладі є батьківський елемент div з position: relative та дочірній елемент div з position: absolute. При натисканні на кнопку "Показати offsetParent", JavaScript-код знаходить offsetParent для дочірнього елемента та виводить його ідентифікатор у вказаному елементі span. Оскільки батьківський елемент є позиціонованим, його ідентифікатор (parent) буде виведено як offsetParent для дочірнього елемента.
Користувач може взаємодіяти зі сторінкою, натискаючи на кнопку "Показати offsetParent", щоб побачити результат роботи властивості offsetParent. Крім того, можна змінювати CSS-властивості position для батьківського та дочірнього елементів, щоб спостерігати, як змінюється значення offsetParent.
Коментарі
Коментарів ще немає — будьте першим!