Рассчитать ширину текста без округления, используя Javascript

Question

У меня есть div, который я использую Javascript для изменения положения. Тем не менее, он округляется неправильно.

#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>

Следует переместить его на 109,8125, но вместо этого переместить на 109,813.

Любой способ сделать его более точным и переместить его в 109.8125?

Может показаться, что это не так важно, но я делаю это несколько раз, так что это выглядит неправильно место, относительно других элементов.

Answer 1

Если вам действительно нужно предотвратить смещение точности из-за ошибки округления, я бы посоветовал вам отслеживать значение независимо от атрибута style. Вот пример того, как вы можете сделать это, используя атрибут data :

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>