检查元素是否为offsetParent

Question

有没有一种方便的方法来检查HTMLElement 是否为offsetParent？

我遇到的情况是，在将元素插入DOM 之前需要确定它的offsetParent 。在插入之前，我可以访问元素的直接父级。

HTMLElements上似乎没有任何属性指示它是否是offsetParent。

有什么好方法吗？

Answer 1

不幸的是，据我所知，DOM API 中没有任何内容可以在元素本身上公开此信息。

根据规范，祖先可以是offsetParentif

该元素是绝对定位后代的包含块

这意味着不仅定位元素符合资格，任何具有 atransform或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)。