jquery - 获取元素的实际浮点宽度

Question

我正在使用 jQuery (v1.7.1) 并且我需要获取元素的绝对浮点宽度，但是 jQuery 的所有宽度方法似乎都是对宽度值进行四舍五入。

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

你可以在这个jsFiddle上看到我的意思

所以，我的问题是：如何获得元素宽度的浮点值？

Answer 1

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

该方法从 Internet Explorer 4 开始就存在，因此在任何地方都可以安全使用。但是，widthandheight属性只存在于 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 中差异更大：http: //jsperf.com/getcomputedstyle-vs-getboundingclientrect

Answer 2

试试这个：

var element = document.getElementById("a");
alert(window.getComputedStyle(element).width);

更新小提琴：http: //jsfiddle.net/johnkoer/Z2MBj/18/