如何使jQuery不舍入.width()返回的值？

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文档中的"浏览器兼容性"说明.

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

导致一些有趣,就像实际宽度和计算宽度之间存在子像素差异一样.(具体来说,我会看到一个单词从一行文本跳转到另一行,表示宽度已被更改,而不仅仅是已锁定.)从另一个问题 - 获取元素的实际浮点宽度 - 我发现out window.getComputedStyle(element).width将返回一个未计算的计算.所以我把上面的代码改成了类似的东西

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

并使用这个代码 - 没有有趣的弹跳!这种经验似乎表明,不具备的价值实际上对浏览器很重要,对吗？(就我而言,Chrome版本26.0.1410.65.)

Answer 3

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());