javascript - 两个 div 具有相同的 parentNode 但不同的 offsetParent

Question

我用具有相同 parentNode 的两个元素调用此函数:

var test = function(target, div){
     alert(div.parentNode == target.parentNode );    // gives true
     alert(div.offsetParent == target.offsetParent); // gives true
     div.setAttribute("style", "position:relative; float:left; height:" + target.offsetHeight + "px;");
     alert(div.parentNode == target.parentNode);     // gives true
     alert(div.offsetParent == target.offsetParent); // gives false!!!
}

如您所见，这两个元素具有相同的父元素，这意味着它们位于 DOM 树的同一分支内，为什么它们具有不同的 offsetParent？

我在这里注意到 div 具有相对位置，这似乎是原因，因为当我删除它时，两个警报都为真。 (但通常元素的位置不应影响其 offsetParent)

/* 经过更多调查后，我编辑了该函数，它应该会显示更多问题所在 */我在 FF 和 Chrome 上得到了相同的结果。两个元素的parentNode都是一个table-td

感谢您的回答。

Answer 1

仅仅因为两个属性都包含“parent”这个词并不意味着它们相似。

• offsetParent属性返回祖先层次结构中定位的最近元素。
• parentNode属性只返回直接父元素。

现在，如果两个元素是兄弟元素(如您的示例所示)，那么它们的偏移量父元素应该相同。但是，元素有可能返回 null 而不是偏移父元素，例如:

• 当元素为display: none
• 当元素是position: fixed

编辑:您的示例涉及一个 td 元素，因此偏移父元素是 calculated in a weird manner .在 td 元素内:

• 非定位元素将那个 td 元素作为它们的偏移父元素。这意味着 target.offsetParent 将是 td。
• 对于定位元素，一般规则适用。这意味着 div.offsetParent 将是 body，因为 div 已定位。

使两个元素具有相同偏移父元素的最简单解决方法是在表格单元格上添加 position: relative。