How to make jQuery to not round value returned by .width()?
JavascriptJqueryCssJavascript Problem Overview
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).
Javascript Solutions
Solution 1 - Javascript
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>
Solution 2 - Javascript
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());
Solution 3 - Javascript
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 -- https://stackoverflow.com/questions/11907514/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.)
Solution 4 - Javascript
You can use getComputedStyle
for it:
parseFloat(window.getComputedStyle($('#container').get(0)).width)
Solution 5 - Javascript
Use the following to get an accurate width:
var htmlElement=$('class or id');
var temp=htmlElement[0].style.width;