为何canvas元素offsetLeft值不符合预期？如何获取相对父元素偏移

React代码 #

import React from 'react';
import styles from "./App.module.css";

const App: React.FC = () => {

  React.useEffect(()=>{
    var canvas = document.getElementById('canvas');
    console.log(canvas?.offsetLeft);
  },[]);

  return (<div>
    <div className={styles.dbody}>
      <div className={styles.canvasBody}>
        <canvas id="canvas"></canvas>
        <div className={styles.container}>dddd</div>
      </div>
    </div>
  </div>);
}

export default App;

CSS代码 #

.dbody {
  background-color: gray;
  height: 100vh;
}

.canvasBody{
  margin-left: 100px;
  background-color:red;
}

.container{
  margin-top: 20px;
  background-color: blue;
  height: 100px;
}

原因分析 #

offsetLeft的计算逻辑是：返回元素相对于最近的已定位祖先元素（即position属性值不为static的元素）的左侧偏移距离。如果所有祖先元素都是默认的static定位，那么会以body作为参考基准。

你的代码中.canvasBody没有设置定位属性，属于static定位，所以Canvas的offsetLeft会以body为参考。而.canvasBody本身有margin-left:100px，这会让Canvas整体相对于body左移100px，因此得到的offsetLeft值是100，而非相对于父元素的0。

解决方法 #

有两种可靠的方式获取元素相对父元素的左侧偏移：

方法1：给父元素添加定位属性

修改.canvasBody的CSS，添加position: relative，让它成为Canvas的定位参考元素：

.canvasBody{
  margin-left: 100px;
  background-color:red;
  position: relative; /* 添加这一行 */
}

此时再获取Canvas的offsetLeft，就会得到相对于.canvasBody的偏移值0。

方法2：使用getBoundingClientRect()计算差值

不需要修改CSS，通过获取元素和父元素的视口位置来计算相对偏移：

React.useEffect(()=>{
  const canvas = document.getElementById('canvas');
  const parent = canvas?.parentElement;
  if(canvas && parent) {
    const canvasRect = canvas.getBoundingClientRect();
    const parentRect = parent.getBoundingClientRect();
    const relativeLeft = canvasRect.left - parentRect.left;
    console.log(relativeLeft); // 输出0
  }
},[]);

getBoundingClientRect()返回元素相对于视口的位置信息，两者的left值相减就能得到子元素相对父元素的左侧偏移。

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