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

tofixed sin redondear

Question

He buscado 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 hago $(''#container'').width(); devolverá 543 en lugar de 543.5. ¿Cómo logro que no redondee el número y devuelva el 543.5 completo (o el número que sea).

Answer 1

Puede usar getComputedStyle para ello:

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

Answer 2

Solo quería agregar mi experiencia aquí, aunque la pregunta es antigua: 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 el contenido 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. He descubierto que usar jQuery de esta manera:

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

está causando algo de gracia, como que hay diferencias subpíxel entre el ancho real y el ancho calculado. (Específicamente, veré una palabra saltar de una línea de texto a otra, indicando que el ancho ha sido cambiado, no solo bloqueado.) De otra pregunta - Obteniendo el ancho real de punto flotante de un elemento - Encontré ese window.getComputedStyle(element).width devolverá un cálculo no redondeado. Así que cambié el código anterior a algo así como

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

Y con ese código, ¡ sin divertidos rebotes! Esa experiencia parece sugerir que el valor no redondeado realmente le importa al navegador, ¿verdad? (En mi caso, Chrome Version 26.0.1410.65.)

Answer 3

Use el Element.getBoundingClientRect nativo en lugar del estilo del elemento. Fue presentado en IE4 y es compatible con todos los navegadores:

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

Nota: Para IE8 y versiones posteriores, 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>

Answer 4

Use lo siguiente para obtener un ancho preciso:

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

Answer 5

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 valor del width con la 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());