Javascript HTML:如何获取元素's相对于其父对象的位置

Question

如何获取元素相对于其父元素的位置(左上(？

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

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

只有香草JS，没有jquery。

Answer 1

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

元素相对于其父的坐标

Answer 2

您可以通过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 编写的原始函数

src：使用JavaScript 读取元素的CSS属性