jQuery.css('width') with a floating point or decimal value

Question

I've set the width of a div to 330px by inspecting it with Chrome and then setting the width manually. When I read the width back with jQuery.css('width') it comes back as 329.77777767181396px.

Does anyone know why this is defaulting to floating point, or whatever it is, instead of an integer?

Thanks

I am not completely answering your question but you can use Math.round(), it works perfectly — Netorica
– Netorica, Commented Aug 29, 2014 at 1:31
Yes. I'm just wondering what got flipped, because it didn't used to do this. — Steve
– Steve, Commented Aug 29, 2014 at 1:32

Netorica · Accepted Answer · 2014-08-29 02:15:16Z

3

you can refer to the w3c specification below if you are really curious about this

http://www.w3.org/TR/CSS21/syndata.html#length-units

the floating values are rounded when the page is rendered, the exact values are stored in the memory and used for its child element calculations. For example, if your div is 105.4999px it is rendered to 105px, it's child elements with a width of 50% will be calculated as .5*100.4999 instead of .5*100.

to complete the whole information about this they are called as subpixel and you can have further reading with John Resig's(jQuery creator) article about the problems with subpixels

http://ejohn.org/blog/sub-pixel-problems-in-css/

edited Aug 29, 2014 at 2:15

answered Aug 29, 2014 at 1:38

Netorica

19.5k19 gold badges78 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Steve Over a year ago

Thanks for that. Where it gets me in trouble is when I try to save the value away in the user's DB record in a varchar 10 field, so that the next time they log in it's the default. It's just puzzling what changed to break this suddenly.

Netorica Over a year ago

well its really safe to round off the values as the w3c specs said

Steve Over a year ago

Yes. It's not very clean here, though, because these .css() values come back as a string with 'px' on the end. So for each one (about 25) I have to strip off the 'px', get the raw number to an integer, do the Math.round, and then convert it back to a string with 'px' on the end. I'll do it. I was just hoping to find out what changed and change it back. I guess I could also increase the DB field length to accept all the digits.

Steve Over a year ago

I just looked at an older saved version of the code and the .css('width') returns and integer number: "330px".

Steve Over a year ago

This may be a clue: when I read boxShadow the values from .css(boxShadow) are rgb(68,68,68) 2px 2.9999...px, 5.9999...px 0px. It got x_off exact (2), but not y_off (2.99…) or blur_dist (5.99…), and then it got spread_dist (0) exact. It seems that the values themselves are sometimes "on grid" (2.00000..), in which case the floating point comes back as 2, and sometimes they're off a hair. What in the world could cause that???

|

Collectives™ on Stack Overflow

jQuery.css('width') with a floating point or decimal value

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related