2

I am trying to get the value of #value_box to display 100.5 but it keeps rounding up. Does anyone know what I can do to get it to show the decimal place?

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', ''));
Community
  • 1
  • 1
bryan
  • 8,879
  • 18
  • 83
  • 166
  • 7
    It's probably due to the fact that you can't have half pixels in a screen...jQuery returns the *actual* size, rather than the one specified in css. This is why you will always get `px` from jQuery even if you specify other units. – JCOC611 Feb 20 '15 at 21:14
  • I beg to differ. 100.5px and 101px looks different on screen. – bryan Feb 20 '15 at 21:15
  • doesn't CSS not allow decimals unless using percentages? – Feek Feb 20 '15 at 21:15
  • 2
    this has nothing to do with the `val` function. – Daniel A. White Feb 20 '15 at 21:15
  • @Feek it allows it for non-pixel – Daniel A. White Feb 20 '15 at 21:17
  • Try it for yourself. Decimal places work. Look for yourself the 101px is slightly larger http://jsfiddle.net/2w5chp8o/2/ – bryan Feb 20 '15 at 21:17
  • Yes @JCOC611, I see a clear difference. In your example. http://i.imgur.com/EN5faoF.png – bryan Feb 20 '15 at 21:18
  • 1
    Interestingly: http://jsfiddle.net/davidThomas/2w5chp8o/1/ `window.getComputedStyle()` returns `100.5` (Chrome 40.x/Win 8.1). – David Thomas Feb 20 '15 at 21:18
  • @bryan This is likely going to be a difference depending on OS and browser. What are you using? They look the exact same to me. Chrome 40.0.2214.111 on Linux. – ajp15243 Feb 20 '15 at 21:19
  • 2
    The browser has two options: round to `100px` or to `101px`. It literally cannot display half a pixel. It's not physically possible (unless it uses alpha channels to compute some sort of anti-alias like effect). – JCOC611 Feb 20 '15 at 21:20
  • @JCOC611, please stop saying it's not possible, when I literally showed you proof in my previous comment. I am using safari in OS X – bryan Feb 20 '15 at 21:21
  • 2
    @JCOC611 While what you say is true, the browser can factor in these decimals if you zoom the screen. And in fact, chrome at least does take this into consideration. bryan's example fiddle is the same width at 100% zoom but becomes 1 pixel different when zoomed in. – James Montagne Feb 20 '15 at 21:24
  • Zooming for me also shows the difference. – ajp15243 Feb 20 '15 at 21:25
  • @JamesMontagne that's definitely true. If there is zoom greater than one, decimals *should* make a difference. In that case it isn't appropriate to round up or down. – JCOC611 Feb 20 '15 at 21:26
  • So going back to my question, since I am using scaled elements and I've seen first hand that half a pixel does make a difference, is there a way I get that decimal place in my `val()`? – bryan Feb 20 '15 at 21:27
  • This question and its answer currently have some issues so I won't close as duplicate, but this could help: http://stackoverflow.com/questions/3603065/how-to-make-jquery-to-not-round-value-returned-by-width You could also use the non-jquery way to read it if you want `el.style.width`. – James Montagne Feb 20 '15 at 21:29

1 Answers1

2

It's .css('width') that rounds. There's a lot to .css in jQuery beyond getComputedStyle. Comparison.

For .css('width'), jQuery uses offsetWidth [source]:

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

In CSS, pixels are just another unit, defined to be 1/96 of an inch. There's nothing inherently integral about them. In high-DPI displays, such as mobile screens, newer laptops, and printed media, it makes sense to have fractions of "pixels." But offsetWidth is defined to be an integer value [CSSOM]:

readonly attribute long offsetWidth;

In this case, where you explicitly set a width in the inline style, and you want to get it, one thing you could do is just use plain DOM to get it:

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

example

You can also try using getBoundingClientRect [CSSOM] and working backwards through the changes introduced by borders and padding. This method returns a DOMRect object with information represented as floating-point numbers [geometry].

$("#the_box")[0].getBoundingClientRect().width - ...
guest
  • 6,450
  • 30
  • 44
  • Why do I get a decimal if I use `.css('background-size')` then? http://jsfiddle.net/2w5chp8o/5/ Does `.css('width')` round differently then `.css('background-size')`? – bryan Feb 20 '15 at 21:50
  • There's no "hook" that specifies a special routine for handling `.css('background-size')`, so it just returns the value from the computed style. For `width` and `height`, see https://github.com/jquery/jquery/blob/2.1.3/src/css.js#L337 – guest Feb 20 '15 at 21:52