Javascript HTML：如何获取元素相对于其父元素的位置？

如何解决Javascript HTML：如何获取元素相对于其父元素的位置？

如何获取元素相对于其父元素的位置（左侧和顶部）？

注意：父 position 既不是 relative 也不是 absolute，所以 offsetLeft & offsetTop 不起作用。

父/子可能有边距/边框/填充。

只有 Vanilla JS，没有 jquery。

解决方法

您可以使用 .getBoundingClientRect() 返回元素相对于视口的位置。因此，您可以使用 .getBoundingClientRect() 获取元素和父元素的位置，并从中计算元素相对于父元素的位置。看看下面的答案。

Element's coordinates relative to its parent

,

您可以通过 window.getComputedStyle 和 vanilla js 选择器获取样式。

function getStyleProp(elem,prop){
    if(window.getComputedStyle)
        return window.getComputedStyle(elem,null).getPropertyValue(prop);
    else if(elem.currentStyle) return elem.currentStyle[prop]; //IE
}


elem = document.getElementById("id")
console.log(getStyleProp(elem,"top"))
console.log(getStyleProp(elem,"left"))

由 Rob W 编写的原始函数

源代码：Read CSS property of an element using JavaScript