How to make jQuery to not round value returned by .width()?

Use the native Element.getBoundingClientRect rather than the style of the element. It was introduced in IE4 and is supported by all browsers:

$("#container")[0].getBoundingClientRect().width

Note: For IE8 and below, see the “Browser Compatibility” notes in the MDN docs.

$("#log").html(
  $("#container")[0].getBoundingClientRect().width
);
#container {
    background: blue;
    width: 543.5px;
    height: 20px;
    margin: 0;
    padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container"></div>
<p id="log"></p>

Leave a Comment