在前端开发中，通常需要获取元素相对于其父容器的位置信息来实现各种特效，如拖拽、缩放等。本文将介绍如何使用 JavaScript 获取元素相对于其父容器的位置信息。
一、offsetParent 属性
每个元素都有一个 offsetParent 属性，该属性表示元素最近的已定位祖先元素。如果没有已定位的祖先元素，则 offsetParent 为根元素（即 <html> 元素）。
可以通过以下代码获取元素的 offsetParent：
const offsetParent = element.offsetParent;
二、offsetLeft 和 offsetTop 属性
每个元素都有 offsetLeft 和 offsetTop 属性，它们分别表示元素的左上角相对于 offsetParent 左上角的距离。
可以通过以下代码获取元素相对于其父容器的偏移量：
const offsetX = element.offsetLeft; const offsetY = element.offsetTop;
三、完整示例代码
以下是一个完整的示例代码，它演示了如何获取元素相对于其父容器的位置信息，并用红色边框标记出元素所在位置：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------------------
-------
---------- -
--------- ---------
------ ------
------- ------
------- --- ----- -----
-
---- -
--------- ---------
---- -----
----- ------
------ -----
------- -----
----------------- -----
-
--------
-------
------
---- ---------------
---- ---------------
------
--------
----- --------- - -------------------------------------
----- --- - -------------------------------
----- ------- - ---------------
----- ------- - --------------
----- ----------- - ------------------------------------------- ----
----- ------------ - -------------------------------------------- ----
-- -------------
---------------- - ---- ----- -----
------------------- - -------------
-- --------------
-------------- - ------- - ----------- - -----
------------- - ------- - ------------ - -----
---------
-------
-------四、总结
以上是获取元素相对于其父容器的位置信息的方法。需要注意的是，offsetLeft 和 offsetTop 计算的是元素的左上角相对于 offsetParent 左上角的距离，并不包含元素的边框和外边距。如果要精确计算元素的位置信息，还需要考虑元素的边框和外边距。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11832
