Question

在阅读jquery源代码时，我发现有时$（）。offsetParent（）返回html，而原生js返回body。

while ( offsetParent && ( !jQuery.nodeName( offsetParent, "html" ) && 
	jQuery.css( offsetParent, "position") === "static" ) ) {
		offsetParent = offsetParent.offsetParent;
}

这是案例：当offsetParent是body时，这里运行代码“offsetParent = offsetParent.offsetParent;”

我的测试：

	console.log(document.getElementById('div').offsetParent);
	console.log($('#div').offsetParent());

结果：

＆LT;身体GT; ...＆LT; /体＆GT;

[html，prevObject：jQuery.fn.jQuery.init [1]，context：document，   jquery：“2.0.3”，构造函数：function，init：function ...]

但是原因是什么？为什么jquery做这个工作？

Answer 1

本机offsetParent方法具有不同的行为，具体取决于文档是否处于怪异模式。 MDN说：

如果元素未定位，则最近的表格单元格或根元素（标准兼容模式中的html;怪癖渲染模式中的主体）是offsetParent。

我认为jQuery正试图将其标准化，因此它总是返回html。使用像jQuery这样的库的原因之一是隐藏浏览器差异。

Answer 2

那是因为HTMLElement.prototype.offsetParent的工作原理如下：

offsetParent属性必须返回运行这些属性的结果   步骤进行：


如果满足以下任何条件，则返回null并终止此算法：

该元素没有关联的CSS layout box。

元素是根元素。

元素为the HTML body element。

该元素的位置属性的计算值是固定的。



返回至少满足下列条件之一的元素的最近祖先元素，并终止此算法if   找到这样一个祖先：

position属性的计算值不是静态的。

是the HTML body element。

元素的position属性的计算值是静态的，祖先是以下HTML elements之一：   td，th或table。



返回null。

jQuery的作品就像这样：

// docElem is the <html> element
var offsetParent = this.offsetParent || docElem;
while (
  offsetParent
  && !jQuery.nodeName( offsetParent, "html" )
  && jQuery.css( offsetParent, "position" ) === "static" )
) {
    offsetParent = offsetParent.offsetParent;
}
return offsetParent || docElem;

因此，

原始offsetParent永远不会返回html内任何元素的body元素。
当本机返回body时，jQuery会继续迭代。所以它会得到null。因此它将返回html元素。

为什么jquery offsetParent（）在本机javascript返回body时返回html

2 个答案: