Question

无论DOM树的深度如何，我都需要获取Firebug检查的任何DOM元素的绝对坐标（相对于文档开头的左侧和顶部）。有这样的插件吗？

Answer 1

事实上，你不需要一个插件，只需要一大堆JavaScript +一些Firebug内部的知识。

您可以在this article中找到如何获取DOM元素的绝对坐标。每个DOM元素都具有属性.offsetLeft .offsetTop .offsetParent，用于定义与其他DOM元素（offsetParent）相关的位置。层次结构顶部的元素具有offsetParent = null。您可以遍历层次结构中的元素及其offsetParents，以找到给定元素的绝对坐标。

从该页面复制的代码：

var findpos = function findPos(obj) {
   var curleft = curtop = 0;
   if (obj.offsetParent) {
      do {
      curleft += obj.offsetLeft;
      curtop += obj.offsetTop;
      } while (obj = obj.offsetParent);
      return [curleft,curtop];
   }
}

（将其粘贴到Firebug中，然后在控制台中提供findpos功能。）

对于大多数最简单的情况，您将offsetParent = <body>具有零偏移（如截图中所示），因此您无需向offsetLeft和offsetTop添加任何内容。但是，如果发生相对定位，那么你必须穿越父母。

当您在Firebug中选择一个元素时，它在Firebug控制台中可用作$0。

因此，在混合这两件事之后，您可以发布截图中的命令：

Firebug - finding absolute coords of a node

轻松获得任何元素的绝对坐标。

我上面粘贴的剧本应该在很多场合都有效。您可能还想阅读this post以获得更强大的功能。

萤火虫 - 获得绝对坐标

1 个答案: