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.

Answer 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/

Answer 2

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.

Answer 3

You are using the element.style.left property for the WRONG purpose! There is no way to avoid this.