获取元素的实际浮点宽度

Question

我正在使用jQuery(v1.7.1),我需要得到一个元素的绝对浮点宽度,但所有jQuery的宽度方法似乎都是对宽度值进行四舍五入.

例如,如果元素的实际宽度是20.333333px,则jQuery的width方法返回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比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/