javascript - 如何使jQuery不舍入.width()返回的值?

我四处搜寻,无法找到这个。 我试图获得div的宽度,但是如果它有一个小数点,它会对数字进行舍入。

例:

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

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

MoDFoX asked 2019-08-13T20:07:47Z
5个解决方案
186 votes

使用原生<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"></div> <p id="log"></p>而不是元素的样式。 它是在IE4中引入的,并得到所有浏览器的支持:

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

注意:对于IE8及更低版本,请参阅&#34;浏览器兼容性&#34; MDN文档中的注释。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container"></div>
<p id="log"></p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container"></div>
<p id="log"></p>
<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 answered 2019-08-13T20:08:18Z
9 votes

只是想在这里添加我的经验,虽然这个问题已经过时了:上面的共识似乎是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。)

davidtheclark answered 2019-08-13T20:09:06Z
7 votes

罗斯艾伦的答案是一个很好的起点,但使用getBoundingClientRect()。width还将包括填充和边框宽度,这与jquery的宽度函数的情况相同:

返回的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());
The_Black_Smurf answered 2019-08-13T20:09:46Z
2 votes

您可以使用getComputedStyle

parseFloat(window.getComputedStyle($('#container').get(0)).width)
Anton Chukanov answered 2019-08-13T20:10:11Z
0 votes

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

var htmlElement=$('class or id');
var temp=htmlElement[0].style.width;
Ali Hasan answered 2019-08-13T20:10:36Z
translate from https://stackoverflow.com:/questions/3603065/how-to-make-jquery-to-not-round-value-returned-by-width