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>

Answer 2

Ross Allen's answer is a good starting point but using getBoundingClientRect().width will also include the padding and the border width which ain't the case the the jquery's width function:

The returned TextRectangle object includes the padding, scrollbar, and the border, but excludes the margin. In Internet Explorer, the coordinates of the bounding rectangle include the top and left borders of the client area.

If your intent is to get the width value with the precision, you'll have to remove the padding and the border like this:

var a = $("#container");
var width = a[0].getBoundingClientRect().width;

//Remove the padding width (assumming padding are px values)
width -= (parseInt(a.css("padding-left")) + parseInt(a.css("padding-right")));

//Remove the border width
width -= (a.outerWidth(false) - a.innerWidth());

Answer 3

Just wanted to add my experience here, though the question's old: The consensus above seems to be that jQuery's rounding is effectively just as good as an unrounded calculation -- but that doesn't seem to be the case in something I've been doing.

My element has a fluid width, generally, but content that changes dynamically via AJAX. Before switching the content, I temporarily lock the dimensions of the element so my layout doesn't bounce around during the transition. I've found that using jQuery like this:

$element.width($element.width());

is causing some funniness, like there are sub-pixel differences between the actual width and the calculated width. (Specifically, I will see a word jump from one line of text to another, indicating the the width has been changed, not just locked.) From another question -- Getting the actual, floating-point width of an element -- I found out that window.getComputedStyle(element).width will return an unrounded calculation. So I changed the above code to something like

var e = document.getElementById('element');
$('#element').width(window.getComputedStyle(e).width);

And with THAT code -- no funny bouncing! That experience seems to suggest that the unrounded value actually does matter to the browser, right? (In my case, Chrome Version 26.0.1410.65.)

Answer 4

You can use getComputedStyle for it:

parseFloat(window.getComputedStyle($('#container').get(0)).width)

Answer 5

Use the following to get an accurate width:

var htmlElement=$('class or id');
var temp=htmlElement[0].style.width;