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

【问题标题】：How to make jQuery to not round value returned by .width()?如何使 jQuery 不舍入 .width() 返回的值？
【发布时间】：2011-04-05 21:47:19
【问题描述】：

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

例子：

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

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

【问题讨论】：

为什么你有十进制像素宽度？无论如何，它们都会四舍五入为整数。你不能有半个像素。
为什么需要这个？没有这些信息，这个问题毫无意义。
@JuanMendes 在我的例子中，在 HiDPI 显示器上，Chrome 38 计算非整数窗口宽度。所以，如果 $.width 向上取整，比如 1250.6 到 1251，并且我根据 1251 进行计算，我就有问题了。四舍五入不是什么大问题。

标签： javascript jquery css

【解决方案1】：

使用以下方法获得准确的宽度：

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

【讨论】：

如果您实际设置它并在style.width 中提供它，为什么还要让 jquery 获得您的计算宽度？

【解决方案2】：

您可以使用getComputedStyle：

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

【讨论】：

【解决方案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());

【讨论】：

你不应该 .replace("px", "") 因为 parseInt 应该为你删除它。
这个问题都是关于防止舍入的，我对这里的明确假设感到困惑，即舍入对于填充值是好的。你为什么要把它和宽度值区别对待？！也许使用parseFloat()？
同样，innerWidth() 是原始问题的一部分，我担心这里的边框宽度计算也适用于舍入值。

【解决方案4】：

使用原生的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>

【讨论】：

+1 如果要设置另一个元素的宽度，请务必以这种方式更改其宽度： $("#other").css("width", $('#container') .get(0).getBoundingClientRect().width + "px");如果你使用 jQuery width() 值将被四舍五入。
根据这个类似的问题 width 和 height 属性在所有版本的 IE 中都不受支持，因此在某些情况下需要计算它们才能使用：stackoverflow.com/questions/11907514/…
不错！ outerWidth(true) 的同样问题？ :) 小备注：` 在 IE8 及以下版本中，getBoundingClientRect() 返回的 DOMRect 对象缺少高度和宽度属性。此外，无法将其他属性（包括高度和宽度）添加到这些 DOMRect 对象上。`
请注意，getBoundingClientRect()在应用 CSS 转换后计算尺寸。
经过测试发现这个方法对隐藏元素不起作用（display: none）。

【解决方案5】：

只是想在这里补充一下我的经验，尽管这个问题很老了：上面的共识似乎是 jQuery 的舍入实际上与未舍入的计算一样好——但在我看来并非如此一直在做。

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

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

引起了一些有趣的事情，例如实际宽度和计算出的宽度之间存在亚像素差异。（具体来说，我会看到一个单词从一行文本跳到另一行，表示宽度已经改变，而不是锁定。）从另一个问题——Getting the actual, floating-point width of an element——我发现window.getComputedStyle(element).width会返回一个不圆的计算。所以我把上面的代码改成了类似

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

并且使用那个代码 - 没有有趣的弹跳！这种经验似乎表明未取整的值实际上确实对浏览器很重要，对吧？（在我的例子中，Chrome 版本 26.0.1410.65。）

【讨论】：

当前 jQuery 的 .css() 文档指出 getComputedStyle() 在 IE 中被称为 runtimeStyle()，并声称 .css() 的优点之一是这个统一的接口。