0

I have defined an element in HTML with a width of 23% (defined in CSS). When I try to get the width of the element using JavaScript, in the console, it returns the wrong value. I'd expect it to return the same as what's returned when running the following:

$('#child').parentElement.offsetWidth * 0.23

Console output - actual vs expected width:

enter image description here

As you can see in the image above, the values are different by 0.23 pixels. I see that the magnitude of the difference changes depending on the screen size. What am I missing?

<!DOCTYPE html>
<html>

<head>

  <link rel="stylesheet" href="jquery-ui.min.css" />
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
    }
    
    #child {
      position: absolute;
      width: 23%;
      height: 50px;
      background-color: orange;
    }
  </style>
</head>

<body>
  <div id="child"></div>
</body>

</html>
Ricky Conn
  • 1
  • 4
  • There's a subtle difference between calculating a value and reading what's stored in the DOM. This like saying 1062*0.23 should equal int.Parse(1062*0.23). Clearly won't. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth *The HTMLElement.offsetWidth read-only property returns the layout width of an element **as an integer**.* – freedomn-m Jan 28 '21 at 10:46
  • How would I get the precise value that I am able to calculate in the console? When I try to get the width in percent, it returns the pixel width (which is wrong). I've used $('#child').width(), $('#child').outerWidth(), $('#child').innerWidth(), $('#child')[0].offsetWidth, $('#child').css('width'). How do I get the width as the same value as the one calculated in my post? – Ricky Conn Jan 28 '21 at 10:52
  • In short: you don't because that's not how it's stored. As before, that's like asking: "how do I get the original value in 'mycalc'" when mycalc is `var mycalc = int.Parse(1062*0.23);` – freedomn-m Jan 28 '21 at 10:54
  • So if I'm understanding you correctly, you're losing data/precision. Is there any way to set the width, left, height, and top as percentages while still retaining precision? Or do you lose precision as soon as you start using CSS to define widths in non-pixel form? – Ricky Conn Jan 28 '21 at 11:03
  • Pixels are *only* defined as integers. When you attempt to set to a decimal, it coerces to an integer. – freedomn-m Jan 28 '21 at 11:06
  • My end goal is to allow elements to resize with the resizing of the screen; so the plan was to use percentages. The loss of precision isn't going to allow me to code my project. How would I allow resizing without losing precision? – Ricky Conn Jan 28 '21 at 11:17
  • Don't read the current values, only set them. If you need the values, store them in a variable / object properties. Or, if you're resizing, always resize from a known point, eg 1000*0.25, 1000*0.5, 1000*1, 1000*2. Rather than relative to the current size. It may help to set your table/div dimensions initially to known values rather than %ages – freedomn-m Jan 28 '21 at 11:29

0 Answers0