使用getBoundingClientRect获取的left值赋值给DIV元素失效如何解决？

你遇到的是两个非常常见的CSS样式赋值误区：

• 第一，getBoundingClientRect().left返回的是不带单位的纯数字（比如你拿到的8实际代表8px），但给CSS的left属性赋值时必须明确指定单位，直接赋值数字是无效的
• 第二，只有目标DIV的position属性不是默认的static时，left属性才会生效，默认static定位的元素会完全忽略top/left/bottom/right配置

正确代码示例 #

假设你的代码原逻辑是这样的：

// 原错误写法
const source = document.getElementById("sourceDiv");
const target = document.getElementById("targetDiv");
const leftVal = source.getBoundingClientRect().left; // 拿到的是8，纯数字
target.style.left = leftVal; // 无效，没有单位

修改为如下写法即可生效：

// 第一步：先确保目标DIV的position属性已设置，比如在CSS里加
// #targetDiv { position: relative; } 或者根据需求设置为absolute/fixed
const source = document.getElementById("sourceDiv");
const target = document.getElementById("targetDiv");
const leftVal = source.getBoundingClientRect().left;
target.style.left = `${leftVal}px`; // 补上px单位

额外注意：如果你的需求是让目标元素相对于父元素定位，而不是相对于视口的绝对位置，还需要扣除父元素的滚动偏移、以及父元素自身的getBoundingClientRect().left值，避免出现定位偏移的问题。

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