Question

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

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

您可以在jsFiddle

上看到我的意思

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

Answer 1

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

该方法自Internet Explorer 4以来就已存在，因此可以安全地随处使用。但是，width和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比Chrome 28中的window.getComputedStyle快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/

获取元素的实际浮点宽度

2 个答案: