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

Question

I've searched around and couldn't find this. I'm trying to get the width of a div, but if it has a decimal point it rounds the number.

Example:

#container{     background: blue;     width: 543.5px;     height: 20px;     margin: 0;     padding: 0; } 

If I do $('#container').width(); it will return 543 instead of 543.5. How do I get it to not round the number and return the full 543.5 (or whatever number it is).

Answer 1

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="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <div id="container"></div>  <p id="log"></p>