为什么调用getBoundingClientRect获取元素尺寸位置时返回不符合预期的结果

你遇到的这个问题90%以上的概率是代码执行时机不对，getBoundingClientRect执行的时候页面DOM还没完成渲染和布局，所以拿不到元素的正确尺寸和位置。

常见原因 #

• JS代码执行时机早于DOM渲染完成：如果你把JS代码放在<head>标签里，或者没有监听DOM加载事件就直接执行查询，此时.container元素还没被浏览器解析渲染，或者还没完成样式计算、布局流程，拿到的自然是错误的尺寸位置。你看到的返回结果里left=8px就是浏览器默认给<body>设置的8px外边距，对应还没完成布局的元素的默认位置。
• 选中了错误的元素：如果你的页面里存在多个class="container"的元素，document.querySelector只会返回匹配到的第一个元素，如果第一个元素是页面顶部的空元素，也会返回你看到的错误结果。

解决方案 #

1. 调整代码执行时机，等DOM完全渲染完成后再调用API
   可以把你的JS逻辑包裹在DOM加载完成的监听回调中：

document.addEventListener('DOMContentLoaded', function() {
  const container = document.querySelector('.container')
  console.log(container.getBoundingClientRect())
})

也可以直接把JS代码放到</body>标签的前面，保证DOM解析完成后再执行JS。

2. 校验选中的元素是否正确
   可以先打印选中的元素本身，确认你拿到的是预期的蓝色区块元素：

const container = document.querySelector('.container')
// 控制台点击打印出的DOM元素，可以直接定位到页面对应的节点
console.log('选中的元素：', container)
console.log('位置尺寸：', container.getBoundingClientRect())

如果你使用的是前端框架（React/Vue等），要确保你是在组件挂载完成的生命周期钩子中调用该API，比如Vue的onMounted、React的空依赖useEffect回调。

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