方法el.getBoundingClientRect()给出了一个相对于视口左上角（0,0）的结果，而不是相对于元素的父元素的结果，而el.offsetTop、el.offsetLeft（等等）给出了一个相对于父元素的结果。将元素的坐标相对于其父元素的最佳实践是什么？修改el.getBoundingClientRect()（如何？）以使用父元素作为(0,0)坐标，还是仍然使用el.offsetTop、el.offsetLeft等？
el.getBoundingClientRect()
0,0
el.offsetTop
el.offsetLeft
(0,0)
p4rjhz4m1#
可以使用getBoundingClientRect()，只需减去父对象的坐标即可：
getBoundingClientRect()
const parentPos = document.getElementById('parent-id').getBoundingClientRect(); const childPos = document.getElementById('child-id').getBoundingClientRect(); const relativePos = {}; relativePos.top = childPos.top - parentPos.top, relativePos.right = childPos.right - parentPos.right, relativePos.bottom = childPos.bottom - parentPos.bottom, relativePos.left = childPos.left - parentPos.left; console.log(relativePos); // something like: {top: 50, right: -100, bottom: -50, left: 100}
现在您有了子节点相对于父节点的坐标。注意，如果top或left坐标为负，则意味着子代在该方向上脱离其父代。如果bottom或right坐标为正，则情况相同。
top
left
bottom
right
x一个一个一个一个x一个一个二个一个x一个一个三个一个
1条答案
按热度按时间p4rjhz4m1#
可以使用
getBoundingClientRect()，只需减去父对象的坐标即可：现在您有了子节点相对于父节点的坐标。
注意，如果
top或left坐标为负，则意味着子代在该方向上脱离其父代。如果bottom或right坐标为正，则情况相同。工作示例
x一个一个一个一个x一个一个二个一个x一个一个三个一个