javascript - .val() 四舍五入？

Question

我正在尝试获取 #value_box 的值以显示 100.5 但它一直在向上舍入。有谁知道我可以做些什么来让它显示小数位？

jsfiddle

<input type="text" id="the_box" style="width:100.5px" value="" />
<input type="text" id="value_box" value="" />

//returns 101
$("#value_box").val($("#the_box").css('width').replace('px', ''));

Answer 1

舍入的是.css('width')。除了 getComputedStyle 之外，jQuery 中的 .css 还有很多内容。 Comparison .

对于 .css('width')，jQuery 使用 offsetWidth [source] :

val = name === "width" ? elem.offsetWidth : elem.offsetHeight,

在 CSS 中，像素只是另一个单位，定义为 1/96 英寸。它们没有任何内在的完整性。在高 DPI 显示器中，例如移动屏幕、较新的笔记本电脑和打印媒体，具有小数“像素”是有意义的。但是 offsetWidth 被定义为一个整数值 [CSSOM] :

readonly attribute long offsetWidth;

在这种情况下，您在内联样式中显式设置了一个 width，并且您想要获取它，您可以做的一件事就是使用纯 DOM 来获取它:

$("#the_box")[0].style.width.replace('px', '')

example

您也可以尝试使用 getBoundingClientRect [CSSOM]并通过边界和填充引入的变化向后工作。此方法返回一个 DOMRect 对象，其中的信息表示为 float [geometry] .

$("#the_box")[0].getBoundingClientRect().width - ...