获取元素的实际浮点宽度

Question

我使用的是jQuery（v1.7.1），我需要获取元素的绝对浮点宽度，但是jQuery的所有width方法似乎都舍入了width的值。

例如，如果元素的实际宽度为20.333333px，则jQuery的width方法返回20，即忽略十进制值。

因此，我的问题是：如何获取元素宽度的浮点值？

Answer 1

如果您已经有对DOM元素的引用，element.getBoundingClientRect将为您提供所需的值。

该方法自Internet Explorer 4起就存在，因此可以在任何地方安全使用。但是，widthand height属性仅在IE9
+中存在。如果支持IE8及以下版本，则必须计算它们：

var rect = $("#a")[0].getBoundingClientRect();

var width;
if (rect.width) {
  // `width` is available for IE9+
  width = rect.width;
} else {
  // Calculate width for IE8 and below
  width = rect.right - rect.left;
}

getBoundingClientRect比window.getComputedStyleChrome 28快70％，而Firefox的区别更大