I'm facing an issue with a div element that I'm manipulating using Javascript to change its position. The problem is that it's rounding off 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>Instead of moving the div by 109.8125, it is moving it by 109.813. Is there a way to ensure more accurate positioning at 109.8125?
While it may seem trivial, this precision is crucial as I am repeating this process multiple times, leading to misalignment with other elements.