Проверьте, является ли элемент offsetParent

Question

Есть ли удобный способ проверить, является ли HTMLElement offsetParent?

У меня есть ситуация, когда мне нужно определить offsetParent элемента до того, как будет вставлен в DOM. Я могу получить доступ к непосредственному родителю элемента перед вставкой.

Похоже, что в элементах HTMLElement отсутствуют какие-либо свойства, указывающие, является ли offsetParent.

Есть ли хороший способ сделать это?

Answer 1

Насколько я знаю, к сожалению, в DOM API нет ничего, что могло бы раскрыть эту информацию о самом элементе.

Согласно спецификации , предок может быть offsetParent, если

Элемент содержит содержащий абсолютно позиционированный блокпотомки

Это означает, что квалифицируются не только позиционированные элементы, но и любой элемент со свойством transform или filter, а will-change со значением, содержащим любое из вышеупомянутых элементов.также сделайте.

Однако это поведение не всегда указывалось таким образом, поэтому оно может возвращать ложные срабатывания в некоторых браузерах.
Кроме того, возможно, что в будущем другие свойства CSS будут влиять на то, что делает содержащий блок , или даже в настоящее время, поскольку я получил их только с кончика головы ...

Учитывая это, самое верное - добавить тестовый элемент в ваш элемент ичтобы проверить его offsetParent.
Однако, это создаст принудительные рефлоу, поэтому использует его время от времени .

document.querySelectorAll('.container > div')
  .forEach(elem => {
    elem.textContent = isOffsetParent(elem) ? 'offsetParent' : 'not offsetParent';
  });

function isOffsetParent(elem) {
  const test = document.createElement('span');
  elem.appendChild(test);
  const result = test.offsetParent === elem;
  elem.removeChild(test);
  return result;
}

<div class="container">

  <div class="is-offset-parent" style="position:relative"></div>
  <div class="can-be-offset-parent" style="transform:translate(0)"></div>
  <div class="can-be-offset-parent" style="filter:blur(1px)"></div>
  <div class="is-not"></div>

</div>

Но если вы действительно хотите какой-нибудь небезопасный способ, который может потребоваться обновить, то вы можете проверить все свойства, которые я упомянул, прежде чем использовать getComputedStyle(elem).