在前端开发中，我们经常需要获取 DOM 元素的位置信息。但是有时候，我们需要获取一个子元素相对于其父元素以外的位置信息。这种情况下，我们需要获取该子元素的全局/世界位置。本文将介绍如何通过 JavaScript 获取子元素的全局/世界位置，并提供示例代码。
什么是全局/世界位置？
一个元素的全局/世界位置指的是它相对于整个页面或浏览器视口的位置。在 HTML 中，每个元素都有自己的坐标系。一个元素的位置属性（例如 top、left、right 和 bottom）只描述了它相对于其父元素的位置。而全局/世界位置则考虑了所有祖先元素的位置。
如何获取子元素的全局/世界位置
要获取子元素的全局/世界位置，我们需要递归地将其位置与所有祖先元素的位置相加。以下是一个 JavaScript 函数，可以返回任何元素的全局/世界位置：
-- -------------------- ---- -------
-------- --------------------- -
--- - - -- - - --
----- --- --- ----- -
- -- --------------
- -- -------------
-- - ----------------
-
------ - -- - --
-此函数使用 offsetLeft 和 offsetTop 属性来获取每个祖先元素的位置，并将它们相加以获得全局/世界位置。函数返回一个包含 x 和 y 坐标的对象。
示例代码
以下是一个示例 HTML 页面，其中包含一个子元素和一个按钮。单击按钮将显示该子元素的全局/世界位置。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -------- ---------------
-------
------
---- ---------------- -----------
---- ---------- ---------------- --------- ---- ----- ----- ----- ------ ----- ------- ----- ----------------- ------------
------
------- ----------------------------- -----------------
--------
-------- --------------------- -
--- - - -- - - --
----- --- --- ----- -
- -- --------------
- -- -------------
-- - ----------------
-
------ - -- - --
-
-------- -------------- -
----- ------- - ---------------------------------
----- -------------- - ---------------------------
------------ --------- ------ -------- -- --------------------- -----------------------
-
---------
-------
-------在上述示例中，我们使用了 getGlobalPosition() 函数来获取子元素的全局/世界位置，并使用 alert 弹窗在页面上显示该位置信息。您可以尝试更改子元素的位置和大小，并单击按钮以查看其全局/世界位置。
总结
获取子元素的全局/世界位置可以帮助我们更好地控制页面布局。使用 JavaScript 的 offsetLeft 和 offsetTop 属性可以递归地获取每个祖先元素的位置，并将它们相加以计算出子元素的全局/世界位置。通过本文提供的示例代码，您可以更好地了解如何实现这一功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25995