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 можуть бути некоректними.

Порада:

Якщо ви працюєте з елементами, які мають властивості transform або filter, що змінюють їх розміри або положення, будьте обережні з використанням властивостей offsetTop та offsetLeft. Значення цих властивостей можуть бути некоректними для трансформованих або фільтрованих елементів. У таких випадках можна розглянути альтернативні способи обчислення координат, наприклад, використовуючи getBoundingClientRect().

Порада:

Пам'ятайте, що властивість offsetParent повертає null, якщо елемент або його батьківські елементи мають display: none або visibility: hidden. У таких випадках ви не зможете отримати коректні координати елемента. Перевіряйте значення offsetParent перед використанням координат.

Порада:

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

function 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

Значення

Return

Переглядачі

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

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

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

Приклади

Цей приклад демонструє використання властивості offsetParent для знаходження найближчого батьківського елемента, який позиціонований. У прикладі є батьківський елемент div з position: relative та дочірній елемент div з position: absolute. При натисканні на кнопку "Показати offsetParent", JavaScript-код знаходить offsetParent для дочірнього елемента та виводить його ідентифікатор у вказаному елементі span. Оскільки батьківський елемент є позиціонованим, його ідентифікатор (parent) буде виведено як offsetParent для дочірнього елемента.

Користувач може взаємодіяти зі сторінкою, натискаючи на кнопку "Показати offsetParent", щоб побачити результат роботи властивості offsetParent. Крім того, можна змінювати CSS-властивості position для батьківського та дочірнього елементів, щоб спостерігати, як змінюється значення offsetParent.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/WNWOeZZ">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми використовуємо властивість offsetParent для визначення найближчого батьківського елемента, який є частиною розмітки сторінки та має position зі значенням, відмінним від static. Це може бути корисним для правильного позиціонування елементів відносно їхніх батьківських елементів.

// Отримуємо елемент, який нас цікавить
const myElement = document.getElementById('myElement');

// Знаходимо його найближчого батьківського елемента з позиціонуванням
const offsetParent = myElement.offsetParent;

// Виводимо назву тегу та розташування цього елемента
console.log(`Найближчий батьківський елемент з позиціонуванням: ${offsetParent.tagName}, left: ${offsetParent.offsetLeft}, top: ${offsetParent.offsetTop}`);

У цьому складнішому прикладі ми використовуємо властивість offsetParent для правильного позиціонування елемента відносно найближчого батьківського елемента з позиціонуванням. Це може бути корисним, наприклад, для створення вспливаючих вікон або елементів, які повинні розташовуватися відносно певного контейнера.

// Отримуємо елемент, який нас цікавить
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ацію,
// необхідно врахувати її при обчисленні координат

JS довідник

JavaScript

Наповнення JS розділу

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

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

Синтаксис

Значення

Return

Переглядачі

Приклади