JavaScript获取元素精确宽度时clientWidth返回整数如何解决

clientWidth 属于DOM标准定义的整数返回类型属性，设计逻辑就会自动舍弃宽度的小数部分做取整处理，因此无法直接输出80.5这类带浮点的精确宽度值。

• 方案1：使用getComputedStyle获取CSS计算宽度
  该API会返回元素最终生效的CSS样式值，带px单位，转换为数值后即可拿到精确浮点宽度：

  const targetEle = document.getElementById('替换为你的元素ID');
  // 得到带px单位的字符串，如 "80.5px"
  const computedWidthStr = window.getComputedStyle(targetEle).width;
  // 转换为浮点型数值
  const exactWidth = parseFloat(computedWidthStr);
  

  该方法返回的宽度默认对应标准盒模型的内容宽度，不含padding、border和margin。

• 方案2：使用getBoundingClientRect获取渲染尺寸
  该API返回元素实际渲染后的位置、尺寸信息，所有尺寸属性默认都是浮点精度：

  const targetEle = document.getElementById('替换为你的元素ID');
  const rectInfo = targetEle.getBoundingClientRect();
  // width属性值包含content+padding+border+滚动条宽度，和offsetWidth的计算逻辑一致
  const exactRenderWidth = rectInfo.width;
  

  如果你需要和clientWidth逻辑完全一致的精确值（含padding、不含border和滚动条），只需要用该值减去getComputedStyle获取到的左右border、滚动条宽度即可。

场景选择提示：仅需要内容宽度优先用方案1，需要元素实际占据的渲染总宽度优先用方案2。

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