在前端开发中，有时我们需要获取某个元素相对于其父容器的位置信息，尤其是在进行元素拖拽、选取等操作时。本文将介绍如何使用原生 JavaScript 获取元素在其父容器中的偏移量，以及可能遇到的一些问题。
获取元素在父容器中的偏移量
首先，我们需要知道元素在页面中的坐标位置。通过 getBoundingClientRect() 方法可以获取元素的左上角和右下角相对于视口的坐标值。具体代码如下：
const rect = element.getBoundingClientRect();
接下来，我们需要计算元素相对于其父容器的偏移量。如果元素没有设置 position 属性或者 position 属性为 static，则可以直接用元素相对于视口的坐标值减去父容器相对于视口的坐标值即可。具体代码如下：
const parentRect = element.parentNode.getBoundingClientRect(); const offsetLeft = rect.left - parentRect.left; const offsetTop = rect.top - parentRect.top;
如果元素的 position 属性为 relative、absolute 或者 fixed，则需要考虑定位偏移量（top、right、bottom、left）。具体代码如下：
const computedStyle = window.getComputedStyle(element);
const position = computedStyle.getPropertyValue('position');
const offsetLeft = rect.left - parentRect.left - parseFloat(computedStyle.getPropertyValue('left')) || 0;
const offsetTop = rect.top - parentRect.top - parseFloat(computedStyle.getPropertyValue('top')) || 0;可能遇到的问题
父容器有边框或者内边距
如果父容器有边框或者内边距，那么元素相对于其父容器的偏移量就需要减去相应的距离。具体代码如下：
const computedStyle = window.getComputedStyle(element.parentNode);
const paddingLeft = parseFloat(computedStyle.getPropertyValue('padding-left')) || 0;
const paddingTop = parseFloat(computedStyle.getPropertyValue('padding-top')) || 0;
const borderLeft = parseFloat(computedStyle.getPropertyValue('border-left-width')) || 0;
const borderTop = parseFloat(computedStyle.getPropertyValue('border-top-width')) || 0;
const offsetLeft = rect.left - parentRect.left - paddingLeft - borderLeft;
const offsetTop = rect.top - parentRect.top - paddingTop - borderTop;父容器不是直接父元素
如果要获取元素相对于某个祖先元素的偏移量，那么可以使用 element.offsetParent 属性递归计算相对偏移量。具体代码如下：
-- -------------------- ---- -------
--- ---------- - ----------
--- --------- - ---------
--- ------------- - ---------------------
----- -------------- --- ----- -
----- ---------- - --------------------------------------
----- ------------- - ---------------------------------------
----- -------- - -------------------------------------------
----- ----------- - ---------------------------------------------------------- -- --
----- ---------- - --------------------------------------------------------- -- --
----- ---------- - --------------------------------------------------------------- -- --
----- --------- - -------------------------------------------------------------- -- --
---------- -- ---------------- - ---------- - -------------
--------- -- --------------- - --------- - ------------
-- --------- --- ------- -- --------------------- --- ------- -
------
-
------------- - ---------------------------
-总结
本文介绍了如何使用原生 JavaScript 获取元素在其父容器中的偏移量，并解决了可能遇到的一些问题。希望本文对大家的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14412