15

我正在尝试在 JavaScript 中进行定位。我正在使用基于经典 quirksmode 函数的累积位置函数，该函数对每个函数求和offsetTop，直到顶部节点。offsetLeftoffsetParent

但是，我遇到了一个问题，我感兴趣的元素offsetParent在 Firefox 中没有。在 IEoffsetParent中存在，但offsetTop总和offsetLeft为 0，因此在效果上与 Firefox 中存在相同的问题。

什么会导致在屏幕上清晰可见且可用的元素没有offsetParent? 或者，更实际地，我怎样才能找到这个元素的位置以便在它下面放置一个下拉菜单？

编辑：以下是如何重现此特定实例的方法（当前接受的答案未解决）：

  1. 打开Stack Overflow 的主页。

  2. 在 Web 浏览器（例如 Chromev21）的控制台中运行以下代码：

    var e = document.querySelector('div');
console.log(e);
// <div id="notify-container"></div>
do{
  var s = getComputedStyle(e);
  console.log(e.tagName,s.display,s.visibility,s.position,e.offsetParent);
} while(e=e.parentElement)
// DIV block visible fixed null
// BODY block visible static null
// HTML block visible static null

为什么是offsetParent那个元素null？

4

7 回答 7

46

我对 2,304 个 div 进行了测试position，其中display、 和的值的visibility唯一组合嵌套在每个这些值的唯一组合中，并确定：


在以下情况下，作为 的后代的其他有效元素<body>
将没有offsetParent值：

  • 该元素有position:fixed（Webkit 和 IE9）
  • 该元素具有display:none （Webkit 和 FF）
  • 任何祖先都有display:none （Webkit 和 FF）

期望没有父元素或未添加到页面本身（不是页面的后代<body>）的元素也将具有offsetParent==null.

于 2012-07-24T21:33:54.160 回答
17

如果文档尚未完成加载，则 offsetParent 可以为 null

于 2008-11-20T18:46:06.117 回答
13

https://developer.mozilla.org/en/DOM/element.offsetParent

当元素的 style.display 设置为“none”时，offsetParent 返回 null。

于 2010-10-06T22:50:14.103 回答
4

这是一个老问题，但我有另一个案例。如果您操作 DOM，您最终可能会得到一个 null offsetParent - 在 IE6 和 IE7 中。

请参阅：IE 6/7 - 访问 offsetParent (Javascript) 时出现“未指定错误”

于 2010-04-27T23:18:39.823 回答
4

offsetParent如果您的元素对象尚未附加到 DOM，则将返回 null。

于 2011-01-15T20:40:08.930 回答
0

当元素左侧的兄弟姐妹被隐藏时，我遇到了这个问题：

<div id="parent">
  <div id="element1">some stuff</div>
  <div id="element2" style="display: none">some hidden stuff</div>
  <div id="element3">child whose offset we want</div>
</div>

我遇到了element3的offsetParent为null 的情况，即使element3本身是可见的，并且parent是可见的。

我见过瘦的是 Firefox 3.6 和 Chrome 5。它似乎也会影响element3上的getBoundingClientRect()函数，这真的很烦人，因为它在许多其他情况下都有效！

于 2010-07-22T20:24:25.993 回答
0

offsetParent当父级位于 Web 组件内时，我也经历过null（即我尝试获取的元素offsetParent被投影到 Web 组件中）。

于 2020-01-16T15:01:22.727 回答