如何使jQuery不舍入.width（）返回的值？

我到处搜寻，却找不到。我正在尝试获取div的宽度，但是如果它有小数点，则将数字四舍五入。

例：

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

如果我这样做$('#container').width();，它将返回543而不是543.5。我如何不对数字取整并返回完整的543.5（或任何数字）。

使用本机Element.getBoundingClientRect而不是元素的样式。它是IE4中引入的，并且受所有浏览器支持：

$("#container")[0].getBoundingClientRect().width

注意：对于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>

罗斯·艾伦（Ross Allen）的答案是一个很好的起点，但使用getBoundingClientRect（）。width还将包括填充和边框宽度，而jQuery的width函数则不是这样：

返回的TextRectangle对象包括填充，滚动条和边框，但不包括边距。在Internet Explorer中，边界矩形的坐标包括工作区的顶部和左侧边界。

如果您想要获得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());

我只是想在这里补充我的经验，尽管这个问题已经过时了：上面的共识似乎是jQuery的舍入实际上与未舍入的计算一样好-但在我正在做的事情中似乎并非如此。

通常，我的元素的宽度是可变的，但是内容会通过AJAX动态更改。在切换内容之前，我会临时锁定元素的尺寸，以免布局在过渡期间反弹。我发现使用jQuery是这样的：

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

会引起一些趣味，例如实际宽度和计算出的宽度之间存在子像素差异。（具体来说，我会看到一个单词从一行文本跳到另一行，表明宽度已更改，而不仅仅是锁定。）从另一个问题开始- 获取元素的实际浮点宽度 -我发现出来window.getComputedStyle(element).width将返回未取整的计算。所以我将上面的代码更改为

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

并带有该代码- 没有有趣的弹跳！该经验似乎表明，未舍入的值实际上对浏览器确实很重要，对吧？（就我而言，Chrome版本26.0.1410.65。）

您可以使用getComputedStyle它：

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

使用以下命令获得准确的宽度：

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