时间戳

首页 > 解决方案 > 检查元素是否是 offsetParent

javascript - 检查元素是否是 offsetParent

问题描述

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

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

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

有没有好的方法来做到这一点？

标签： javascripthtmldom

解决方案

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

根据规范，祖先可以是offsetParentif 。

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

这意味着不仅定位元素将符合条件，而且任何具有 atransform或filter 属性 awill-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)。

推荐阅读