如何获取CSS transform执行前div相对于父容器的left偏移值？

• CSS transform 属于渲染层属性，仅改变元素最终绘制的位置，不会修改元素在文档流中的实际布局坐标，因此offsetLeft这类布局相关属性永远返回元素的初始布局偏移，不会随translateX变化。
• 你代码中设置了transition: transform 250ms过渡效果，刚修改transform属性时立即调用getBoundingClientRect()，此时过渡动画还未执行，拿到的还是变换前的位置值。

可以通过两个思路实现你的需求：

方案1：直接计算相对偏移（无需额外变量） #

相对容器的left位置 = 元素的视口left坐标 - 容器的视口left坐标，不受布局属性影响：

const display = document.querySelector('.display');
const container = document.querySelector('.outer-div');

document.addEventListener("click", (event) => {
  if (!event.target.closest("button") || event.target.id !== "button" || event.target.textContent !== "left") return;

  // 变换前相对容器的位置
  const beforeLeft = display.getBoundingClientRect().left - container.getBoundingClientRect().left;
  console.log("before : " + beforeLeft);
  
  display.style.transform += "translateX(50px)";

  // 变换完成后获取位置，监听过渡结束事件
  display.addEventListener('transitionend', () => {
    const afterLeft = display.getBoundingClientRect().left - container.getBoundingClientRect().left;
    console.log("after : " + afterLeft);
  }, { once: true }); // 只触发一次，避免重复绑定
});

方案2：维护偏移量变量（性能更高） #

自己维护累计平移的数值，不需要每次读取DOM属性，性能更好，也不受过渡效果影响：

const display = document.querySelector('.display');
const container = document.querySelector('.outer-div');
// 初始化记录累计偏移量
let translateX = 0;
// 初始相对位置
const initOffsetLeft = display.offsetLeft;

document.addEventListener("click", (event) => {
  if (!event.target.closest("button") || event.target.id !== "button" || event.target.textContent !== "left") return;

  // 变换前位置 = 初始偏移 + 已累计的平移值
  const beforeLeft = initOffsetLeft + translateX;
  console.log("before : " + beforeLeft);

  // 累加偏移量
  translateX += 50;
  display.style.transform = `translateX(${translateX}px)`;

  // 变换后最终位置直接计算即可，不需要等过渡
  const afterLeft = initOffsetLeft + translateX;
  console.log("after : " + afterLeft);
});

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