Javascript 如何使 jQuery 不舍入 .width() 返回的值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3603065/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make jQuery to not round value returned by .width()?
提问by MoDFoX
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.
我找遍了，没找到这个。我试图获得一个 div 的宽度，但如果它有一个小数点，它会四舍五入这个数字。
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).
如果我这样做$('#container').width();，它将返回 543 而不是 543.5。我如何让它不舍入数字并返回完整的 543.5（或任何数字）。
回答by Ross Allen
Use the native Element.getBoundingClientRectrather than the style of the element. It was introduced in IE4 and is supported by all browsers:
使用原生Element.getBoundingClientRect而不是元素的样式。它是在 IE4 中引入的，并被所有浏览器支持：
$("#container")[0].getBoundingClientRect().width
Note: For IE8 and below, see the "Browser Compatibility" notesin the MDN docs.
注意：对于 IE8 及以下，请参阅MDN 文档中的“浏览器兼容性”说明。
$("#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>回答by davidtheclark
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.
只是想在这里添加我的经验，尽管问题很老：上面的共识似乎是 jQuery 的舍入实际上与未舍入的计算一样好——但在我一直在做的事情中似乎并非如此.
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:
我的元素通常具有可变宽度，但内容通过 AJAX 动态更改。在切换内容之前，我暂时锁定了元素的尺寸，这样我的布局就不会在转换过程中反弹。我发现像这样使用 jQuery：
$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).widthwill return an unrounded calculation. So I changed the above code to something like
正在引起一些有趣的事情，例如实际宽度和计算宽度之间存在子像素差异。（具体来说，我会看到一个单词从一行文本跳转到另一行，表明宽度已更改，而不仅仅是锁定。）从另一个问题——获取元素的实际浮点宽度——我发现outwindow.getComputedStyle(element).width将返回一个未舍入的计算。所以我把上面的代码改成了
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 doesmatter to the browser, right? (In my case, Chrome Version 26.0.1410.65.)
用那个代码——没有有趣的弹跳！这经验似乎表明，未舍入的值实际上做事情到浏览器，对不对？（就我而言，Chrome 版本为 26.0.1410.65。）
回答by The_Black_Smurf
Ross Allen's answeris a good starting point but using getBoundingClientRect().widthwill also include the padding and the border width which ain't the case the the jquery's width function:
罗斯艾伦的答案是一个很好的起点，但使用getBoundingClientRect().width还将包括填充和边框宽度，这不是jquery 的宽度函数的情况：
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.
返回的 TextRectangle 对象包括内边距、滚动条和边框，但不包括边距。在 Internet Explorer 中，边界矩形的坐标包括客户区的上边框和左边框。
If your intent is to get the widthvalue with the precision, you'll have to remove the padding and the border like this:
如果您的意图是获得width精确的值，则必须像这样删除填充和边框：
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());
回答by Anton Chukanov
You can use getComputedStylefor it:
你可以使用getComputedStyle它：
parseFloat(window.getComputedStyle($('#container').get(0)).width)
回答by Ali Hasan
Use the following to get an accurate width:
使用以下方法获得准确的宽度：
var htmlElement=$('class or id');
var temp=htmlElement[0].style.width;
