Question

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

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

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

有什么好方法吗？

Answer 1

不幸的是，据我所知，DOM API中没有任何东西确实在Element本身上公开了此信息。

According to specs，祖先可以是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)之前检查一下我提到的所有属性。

检查元素是否为offsetParent

1 个答案: