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