¿Cómo hacer que jQuery no redondee el valor devuelto por .width ()?

He buscado alrededor y no pude encontrar esto. Estoy tratando de obtener el ancho de un div, pero si tiene un punto decimal, redondea el número.

Ejemplo:

#container{
    background: blue;
    width: 543.5px;
    height: 20px;
    margin: 0;
    padding: 0;
}

Si lo hago $('#container').width();, devolverá 543 en lugar de 543,5. ¿Cómo consigo que no redondee el número y devuelva el 543,5 completo (o el número que sea)?

Utilice el estilo nativo en Element.getBoundingClientRectlugar del estilo del elemento. Se introdujo en IE4 y es compatible con todos los navegadores:

$("#container")[0].getBoundingClientRect().width

Nota: Para IE8 y versiones anteriores, consulte las notas de "Compatibilidad del navegador" en los documentos de MDN.

$("#log").html(
  $("#container")[0].getBoundingClientRect().width
);

#container {
    background: blue;
    width: 543.5px;
    height: 20px;
    margin: 0;
    padding: 0;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container"></div>
<p id="log"></p>

Solo quería agregar mi experiencia aquí, aunque la pregunta es vieja: el consenso anterior parece ser que el redondeo de jQuery es efectivamente tan bueno como un cálculo no redondeado, pero ese no parece ser el caso en algo que he estado haciendo .

Mi elemento tiene un ancho fluido, en general, pero un contenido que cambia dinámicamente a través de AJAX. Antes de cambiar el contenido, bloqueo temporalmente las dimensiones del elemento para que mi diseño no rebote durante la transición. Descubrí que usar jQuery así:

$element.width($element.width());

está causando algo de gracia, como si hubiera diferencias de subpíxeles entre el ancho real y el ancho calculado. (Específicamente, veré una palabra saltar de una línea de texto a otra, lo que indica que se ha cambiado el ancho, no solo bloqueado). De otra pregunta: obteniendo el ancho real de punto flotante de un elemento , encontré out que window.getComputedStyle(element).widthdevolverá un cálculo sin redondear. Así que cambié el código anterior a algo como

var e = document.getElementById('element');
$('#element').width(window.getComputedStyle(e).width);

Y con ESE código, ¡ no hay rebotes divertidos! Esa experiencia parece sugerir que el valor no redondeado realmente es importante para el navegador, ¿verdad? (En mi caso, Chrome versión 26.0.1410.65.)

La respuesta de Ross Allen es un buen punto de partida, pero el uso de getBoundingClientRect (). Width también incluirá el relleno y el ancho del borde, que no es el caso de la función de ancho de jquery :

El objeto TextRectangle devuelto incluye el relleno, la barra de desplazamiento y el borde, pero excluye el margen. En Internet Explorer, las coordenadas del rectángulo delimitador incluyen los bordes superior e izquierdo del área del cliente.

Si su intención es obtener el widthvalor con precisión, tendrá que eliminar el relleno y el borde de esta manera:

var a = $("#container");
var width = a[0].getBoundingClientRect().width;

//Remove the padding width (assumming padding are px values)
width -= (parseInt(a.css("padding-left")) + parseInt(a.css("padding-right")));

//Remove the border width
width -= (a.outerWidth(false) - a.innerWidth());

Puede utilizar getComputedStylepara ello:

parseFloat(window.getComputedStyle($('#container').get(0)).width)

Utilice lo siguiente para obtener un ancho preciso:

var htmlElement=$('class or id');
var temp=htmlElement[0].style.width;