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

offsetParent是具有位置的最接近的父级，因此当div具有位置本身时，它就是它自己的offsetParent。

Answer 2

因为两个属性都包含单词＆＃34; parent＆＃34;并不代表他们很相似。

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

现在，如果两个元素是兄弟元素（如您的示例中所示），则它们的偏移父元素应该相同。但是，元素可能会返回null而不是偏移父元素，例如：

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

编辑：您的示例涉及td元素，因此偏移父级为calculated in a weird manner。在td元素内：

非定位元素将td元素作为其偏移父元素。这意味着target.offsetParent将是td。
对于定位元素，适用常规规则。这意味着div.offsetParent将body，因为div已定位。

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

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

2 个答案: