3

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

4

1 回答 1

3

实际上，您不需要插件，只需要一些 JavaScript + 一些 Firebug 内部知识的知识。

您可以在本文中找到如何获取 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 中选择一个元素时，它就像$0在 Firebug 控制台中一样可用。

因此，将两者混合后，您可以发出屏幕截图中的命令：

Firebug - 查找节点的绝对坐标

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

我在上面粘贴的脚本应该在绝大多数情况下都可以使用。您可能还想阅读这篇文章以获得更强大的功能。

于 2012-06-06T20:52:02.337 回答