html/javascript precision on numeric style values

Question

see the following example:

<script language="javascript" type="text/JavaScript">
function testPrecision() {
    document.getElementById("test").style.left = "30.176283764px";  
    alert(document.getElementById("test").style.left);
}
</script>

<div id="test" style="left:20px; width:100px; height:100px; background-color:Red;" onclick="testPrecision();"></div>

why does the style number get rounded, and is there any way to avoid this?

Edit - to clarify: I'm not trying to display 0.1 of a pixel, I'm not that stupid :) The values are set on the server and represent very precise numbers in the data. It doesn't matter that they aren't displayed exactly, but the user can interact with the data clientside by manipulating various DOM elements, and I need to be able to retrieve these precise numbers on postback. I was hoping I could avoid rewriting the app to use lots of hidden fields instead, but it looks like maybe not.

In Ie i got: 30px; Firefox and Chrome: 30.1763px; Opera: 30.18px; If you need to store this values, use some array — Coyod
– Coyod, Commented Dec 4, 2009 at 13:23
Unless you have a monitor that can light up one tenth of a pixel you're doing it wrong — Kaze no Koe
– Kaze no Koe, Commented Dec 4, 2009 at 13:27

MillsJROSS · Accepted Answer · 2009-12-04 14:10:21Z

3

Technically speaking, a pixel is the smallest available image on your screen. The only way, I can think of to avoid your problem, is to round the pixel to a whole number before you set it as the css left. That way, at least, all browsers will be given the same value.

EDIT ->

Given your updated information. You don't necessarily have to add hidden fields. Just make a JavaScript object that stores your data and the stores which element your data represents.

var divs = [
    {number: 3.3333949, id: "some_id"},
    {number: 1.23456, id: "some_id2"}];

This is an array of objects that contain your precise number, and the id of the div you want an association with. There's many other ways you can store the data, though, this is just a quick example. That said, there's nothing wrong with using hidden elements, if it makes it easier to send back information to the server through a form.

edited Dec 4, 2009 at 14:10

answered Dec 4, 2009 at 13:39

MillsJROSS

1,2397 silver badges9 bronze badges

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

1 Comment

Jerod Venema Over a year ago

+1, don't bother with hidden inputs. Another option would be expando properties on the dom element (div.originalNumber = 3.33333325).

AutomatedTester · Accepted Answer · 2009-12-04 13:13:56Z

1

Each browser seems to do its own rounding on this. John Resig, of jQuery fame, explains it really well here.

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

answered Dec 4, 2009 at 13:13

AutomatedTester

22.5k7 gold badges51 silver badges64 bronze badges

Collectives™ on Stack Overflow

html/javascript precision on numeric style values

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related