如何用JavaScript设置元素top和left位置且避免数值被四舍五入

方案1：使用CSS变量存储高精度值 #

浏览器对style.top这类内联样式属性会自动做精度截断，但CSS自定义属性（变量）可以完整保留高精度数值。

• 设置变量：

  const widget = document.querySelector(".widget");
  widget.style.setProperty("--top-precise", "1.23456789%");
  

• 对应CSS（需确保元素定位生效）：

  .widget {
    position: absolute;
    top: var(--top-precise);
  }
  

• 获取精确值：

  const preciseTop = getComputedStyle(widget).getPropertyValue("--top-precise").trim();
  console.log(preciseTop); // 输出 "1.23456789%"
  

方案2：自定义存储高精度状态 #

不依赖DOM的style属性存储精确值，而是把数值存在元素的dataset或自定义对象中，仅用style.top做渲染层的应用。

• 存储并应用值：

  const widget = document.querySelector(".widget");
  // 把精确值存到dataset
  widget.dataset.preciseTop = "1.23456789";
  // 同步到样式
  widget.style.top = `${widget.dataset.preciseTop}%`;
  

• 获取精确值：

  const preciseTop = `${widget.dataset.preciseTop}%`;
  console.log(preciseTop); // 输出 "1.23456789%"
  

方案3：用transform替代top属性 #

transform的数值精度远高于top这类布局属性，且操作时不会触发页面重排，适合对精度和性能都有要求的场景。

• 设置transform：

  const widget = document.querySelector(".widget");
  widget.style.transform = `translateY(1.23456789%)`;
  

• 获取精确值：

  console.log(widget.style.transform); // 输出 "translateY(1.23456789%)"
  

注意事项 #

• 使用transform时，需确认元素的布局逻辑不依赖top的流定位（transform属于合成层操作，不影响其他元素布局）。
• 若需要计算元素实际位置，可结合getBoundingClientRect()获取精确像素坐标，再反向推导百分比数值。

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