我想知道如何获取 HTML 元素的 X 和 Y 位置，例如img and div在 JavaScript 中。
正确的方法是使用element.getBoundingClientRect() https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect:
var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);
只要您可能关心，Internet Explorer 就支持这一点，并且它最终在CSSOM 视图 http://www.w3.org/TR/cssom-view/#the-getclientrects-and-getboundingclientrect-methods。所有其他浏览器都采用了它很久以前 http://www.quirksmode.org/dom/w3c_cssom.html#t21.
某些浏览器还返回高度和宽度属性，尽管这是非标准的。如果您担心旧版浏览器的兼容性，请检查此答案的修订版以获取优化的降级实现。
返回的值element.getBoundingClientRect()是相对于视口的。如果您需要相对于另一个元素的它，只需从另一个矩形中减去一个矩形即可：
var bodyRect = document.body.getBoundingClientRect(),
elemRect = element.getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
alert('Element is ' + offset + ' vertical pixels from <body>');
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
