javascript - 检查元素是否是 offsetParent

Question

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

我有一种情况，我需要确定一个元素的 offsetParent before 它被插入到 DOM 中。在插入之前，我可以访问该元素的直接父级。

HTMLElements 上似乎没有任何属性表明它是否是一个 offsetParent。

有什么好的方法吗？

Answer 1

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

According to specs , ancestor 可以是 offsetParent 如果

The element is a containing block of absolutely-positioned descendants

这意味着不仅定位元素符合条件，任何具有 transform 或 filter 属性、will-change 的元素都符合条件具有包含上述任何值的值也可以。

然而，这种行为并不总是以这种方式指定，因此它可能会在某些浏览器中返回误报。
此外，将来其他 CSS 属性可能会影响构成包含 block 的内容，甚至在现在，因为我只是从头脑中得到这些...

考虑到这一点，最可靠的方法是在您的元素中附加一个测试元素并检查其 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) 之前提到的所有属性。