JS 中怎么获取元素在页面中的绝对坐标与宽高（getBoundingClientRect）-js教程-PHP中文网

getBoundingClientRect()返回元素在视口中的绝对位置和尺寸，含left、top、right、bottom、width、height六个只读像素值；left/top为相对视口左上角偏移量，随滚动变化；加scrollX/Y可转为文档绝对坐标；width/height已兼容transform缩放与裁剪，但不等于offsetWidth/offsetHeight；支持IE9+，跨域iframe中会抛SecurityError。

js 中怎么获取元素在页面中的绝对坐标与宽高（getboundingclientrect）

getBoundingClientRect() 是 JS 中获取元素在视口（viewport）中绝对位置和尺寸最常用、最可靠的方法。它返回一个 DOMRect 对象，包含 left、top、right、bottom、width、height 六个只读属性，单位均为像素。

获取视口内的绝对坐标（相对于左上角）

调用后得到的 left 和 top 表示元素**左上角在当前可视区域中的横纵偏移量**（即距离浏览器窗口左边缘、上边缘的距离），不是相对于整个文档的滚动位置。

注意：该值会随页面滚动实时变化 —— 因为它是相对于“当前可见区域”的，不是固定文档坐标。

若需转为**相对于整个文档顶部/左侧**的绝对坐标，可加上 window.scrollX 和 window.scrollY：

const rect = el.getBoundingClientRect();
const absLeft = rect.left + window.scrollX;
const absTop  = rect.top  + window.scrollY;

宽高直接可用，且自动处理 CSS 缩放与 transform

width 和 height 是计算后的实际渲染尺寸，已自动兼容以下情况：

arcgis-js

提供 ArcGIS Maps SDK for JavaScript 开发辅助，涵盖 2D/3D 地图视图、图层管理、数据可视化、空间分析等功能模块的参考和示例指导。

下载

CSS transform: scale() 或 rotate()（返回的是变换后包围盒的宽高）
父级设置了 transform（此时 getBoundingClientRect 返回的是最终合成层中的尺寸）
元素被部分裁剪或溢出隐藏（clip-path、overflow: hidden 不影响该方法返回值）

但注意：width/height 不等于 offsetWidth/offsetHeight —— 后者包含 border，且不响应 CSS transform 缩放。

兼容性好，但注意 iframe 跨域限制

该方法在所有现代浏览器（包括 IE9+）中都支持，使用简单：

const el = document.querySelector('#myBox');
if (el) {
  const rect = el.getBoundingClientRect();
  console.log(rect.left, rect.top, rect.width, rect.height);
}

唯一限制是：若元素位于跨域的内，调用会抛出安全错误（SecurityError），无法获取。