Question

我四处搜寻，找不到这个。我试图得到一个div的宽度，但如果它有一个小数点，它会舍入数字。

示例：

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

如果我$('#container').width();，它将返回543而不是543.5。如何让它不对数字进行舍入并返回完整的543.5（或任何数字）。

Answer 1

使用原生Element.getBoundingClientRect而不是元素的样式。它是在IE4中引入的，并得到所有浏览器的支持：

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

注意：对于IE8及更低版本，请参阅MDN文档中的"Browser Compatibility" notes。

$("#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

只是想在这里添加我的经验，虽然这个问题很古老：上面的共识似乎是jQuery的舍入实际上和没有基础的计算一样好 - 但事实上似乎并非如此。一直在做。

我的元素通常具有流畅的宽度，但内容通过AJAX动态变化。在切换内容之前，我暂时锁定了元素的尺寸，这样我的布局在转换过程中不会反弹。我发现像这样使用jQuery：

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

导致一些有趣，就像实际宽度和计算宽度之间存在子像素差异一样。（具体来说，我会看到一个单词从一行文本跳转到另一行，表示宽度已被更改，而不仅仅是已锁定。）从另一个问题 - Getting the actual, floating-point width of an element - 我发现{{1}将返回一个未计算的计算。所以我将上面的代码更改为

window.getComputedStyle(element).width

使用那些代码 - 没有搞笑的弹跳！这种体验似乎表明实际上的对浏览器无关紧要，对吗？（就我而言，Chrome版本26.0.1410.65。）

Answer 3

Ross Allen's answer是一个很好的起点，但使用getBoundingClientRect().width也会包含填充和边框宽度，而jquery's width function则是

返回的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());

Answer 4

您可以使用getComputedStyle：

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

Answer 5

使用以下内容获得准确的宽度：

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

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

5 个答案: