使用Javascript计算不四舍五入的文本宽度

Question

I have a div that I using Javascript to change the position of. However, it is rounding incorrectly.

 #hi{ background-color: blue; width: 2px; height: 10px; position: absolute; }

 <div id = "hi"></div> <button onclick="myFunction()" style = "margin-top: 100px">Click me</button> <script> function myFunction() { var div = document.getElementById("hi"); div.style.left = "0px"; console.log("BEFORE: " + div.style.left); var moveBy = 109.8125; div.style.left = moveBy + 'px'; console.log("MOVE BY: " + moveBy); console.log("NEW POSITION: " + div.style.left); } </script>

It should move it by 109.8125, but instead moves it by 109.813.

Any way to make it more accurate and move it to 109.8125?

It may seem like it is not that important, but I am doing this several times, so then it looks in the wrong place, relative to other elements.

Answer 1

If you really need to prevent precision drift due to rounding error, I'd suggest you keep track of the value independently of the style attribute. Here's an example of how you could do it using a data attribute :

 function myFunction() { var div = document.getElementById("hi"); div.style.left = "0px"; console.log("BEFORE: " + div.style.left); var moveBy = 109.8125; // track the current value as a data attribute, // which won't get rounded const left = div.dataset.left = parseFloat(div.dataset.left || 0) + moveBy; // apply the computed value as a style div.style.left = left + 'px'; console.clear(); console.log(`dataset.left: ${left}, style.left: ${div.style.left}`); }

 #hi { background-color: blue; width: 2px; height: 10px; position: absolute; }

 <div id="hi"></div> <button onclick="myFunction()" style="margin-top: 100px">Click me</button>