Obteniendo el ancho de punto flotante real de un elemento

Estoy usando jQuery (v1.7.1) y necesito obtener el ancho absoluto de punto flotante de un elemento, pero todos los métodos de ancho de jQuery parecen estar redondeando el valor del ancho.

Por ejemplo, si el ancho real de un elemento es 20.333333px , el método de ancho de jQuery devuelve 20 , es decir, ignora el valor decimal.

Puedes ver lo que quiero decir con este jsFiddle

Entonces, mi pregunta es: ¿cómo obtengo el valor de coma flotante del ancho de un elemento?

Si ya tiene una referencia al elemento DOM, element.getBoundingClientRect le proporcionará los valores que desea.

El método existe desde Internet Explorer 4, por lo que es seguro usarlo en todas partes. Sin embargo, los atributos de width y height solo existen en IE9 +. Debe calcularlos si es compatible con IE8 y siguientes:

 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 es un 70% más rápido que window.getComputedStyle en Chrome 28, y las diferencias son mayores en Firefox: http://jsperf.com/getcomputedstyle-vs-getboundingclientrect

Prueba esto:

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

Fiddle actualizado: http://jsfiddle.net/johnkoer/Z2MBj/18/