Getting the actual, floating-point width of an element

Question

I\'m using jQuery (v1.7.1) and I need to get the absolute, floating-point width of an element, but all of jQuery\'s width methods seem to be rounding-off the value of the wi

Answer 1

If you already have a reference to the DOM element, element.getBoundingClientRect will get you the values you want.

The method has existed since Internet Explorer 4, and so it's safe to use everywhere. However, the width and height attributes exist only in IE9+. You have to calculate them if you support IE8 and below:

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 is 70% faster than window.getComputedStyle in Chrome 28, and the differences are greater in Firefox: http://jsperf.com/getcomputedstyle-vs-getboundingclientrect

Answer 2

Try this:

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

Updated fiddle: http://jsfiddle.net/johnkoer/Z2MBj/18/