change - resize jquery

Obtención del ancho real de punto flotante de un elemento

Question

Estoy usando jQuery (v1.7.1) y necesito obtener el ancho de punto flotante absoluto 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 era 20.333333px , el método de ancho de jQuery devuelve 20 , es decir, ignorando el valor decimal.

Puedes ver lo que quiero decir en este jsFiddle

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

Answer 1

Prueba esto:

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

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

Answer 2

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

El método ha existido desde Internet Explorer 4, por lo que es seguro utilizarlo en todas partes. Sin embargo, los atributos de width y height solo existen en IE9 +. Tienes que calcularlos si soportas IE8 y más abajo:

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