如何获取margin设为auto的元素位置？（jQuery/原生JS实现）

不管是原生JavaScript还是jQuery，都能轻松获取这个响应式居中元素的实时位置信息，下面分别给你详细说明实现方式：

原生JavaScript方法 #

最常用且可靠的是使用getBoundingClientRect() API，它会返回一个DOMRect对象，包含元素相对于视口的位置和尺寸信息，比如top、left、bottom、right、width、height等属性。如果需要获取相对于整个文档的位置，只需要加上当前的滚动距离即可。

示例代码：

// 获取目标元素
const targetElement = document.querySelector('.new_element');
// 获取元素的视口位置信息
const rectInfo = targetElement.getBoundingClientRect();

// 输出相对于视口的位置
console.log('元素距离视口顶部的距离：', rectInfo.top);
console.log('元素距离视口左侧的距离：', rectInfo.left);

// 计算并输出相对于整个文档的位置（包含滚动偏移）
const docTop = rectInfo.top + window.scrollY;
const docLeft = rectInfo.left + window.scrollX;
console.log('元素距离文档顶部的距离：', docTop);
console.log('元素距离文档左侧的距离：', docLeft);

另外你也可以使用offsetLeft和offsetTop属性，但这两个值是相对于元素的offsetParent（最近的定位父元素）的位置，场景局限性稍大，一般优先推荐getBoundingClientRect()。

jQuery方法 #

jQuery提供了两个便捷的方法来获取元素位置：

1. offset()：返回元素相对于整个文档的位置坐标
2. position()：返回元素相对于最近的定位父元素的位置坐标

示例代码：

// 获取目标元素的jQuery对象
const $target = $('.new_element');

// 获取相对于文档的位置
const docOffset = $target.offset();
console.log('元素距离文档顶部：', docOffset.top);
console.log('元素距离文档左侧：', docOffset.left);

// 获取相对于父元素的位置（如果父元素是position: relative/absolute/fixed的话）
const parentPosition = $target.position();
console.log('元素距离父元素顶部：', parentPosition.top);
console.log('元素距离父元素左侧：', parentPosition.left);

需要注意的是，不管你的屏幕尺寸怎么变化（元素响应式缩放或居中），这些方法都会返回元素的实时位置，完全适配你的CSS布局逻辑。

内容的提问来源于stack exchange，提问作者Xceptions