.width（）函数未返回正确的值

Question

我正在尝试使用.width()通过jQuery动态访问元素的宽度。在开发人员工具中，我可以看到元素的宽度为37.333Px，其中.width()给出38.33334Px。

开发人员工具中的宽度

宽度来自.width（）

在这种情况下，差异是1px，但有时它的差异是小数。为什么会有这样的差异？我哪里错了？是否还有其他可以获得准确的宽度。

Answer 1

我们可以通过下面列出的几种方法获得宽度，

width() - 设置或返回元素的宽度

innerWidth() - 返回元素的宽度（包括填充）

outerWidth() - 返回元素的宽度（包括填充和边框）。

outerWidth(true) - 返回元素的宽度（包括填充，边框和边距）。

Answer 2

仅在DOM准备好为您提供确切值时才使用.width()。 因为在解析时需要时间来调整自己。

因此您需要使用$(document).ready(...或$(window).load...

Answer 3

当隐藏元素或其父元素时，.width（）报告的值不保证准确。 此外，当用户缩放页面时，尺寸可能不正确;

请注意，.width（）将始终返回内容宽度，而不管CSS box-sizing属性的值如何。从jQuery 1.8开始，这可能需要检索CSS宽度加上box-sizing属性，然后在元素具有box-sizing：border-box时减去每个元素上的任何潜在边框和填充。要避免这种惩罚，请使用.css（＆＃34; width＆＃34;）而不是.width（）。

在选择元素时，您应该更具体。使用XPath绝不是一个好主意，因为树结构中的最小变化将破坏您的代码。尝试使用ID，Class等进行选择

Answer 4

我之前有同样的问题并得到了答案：

浏览器采取了两项措施：

首先：关于百分比本身 - 例如 - Internet Explorer 7-11会将任意百分比截断为2位小数，更现代的浏览器将舍入到大量小数位。

然后第二个动作是使用该百分比计算得到的像素值。

示例：

  

我们有一个宽度为1325px的容器。
     在内部，我们有一个宽度设置为CSS的盒子，宽度设置为50.5290112％       这应该通过使用计算（1325/100）x 50.5290112为我们提供669.5093984px框的像素宽度。

     

在Internet Explorer 8中，框的宽度实际为669像素       IE8中发生的事情是浏览器将百分比截断为50.52％       通过使用计算（1325/100）×50.52，这导致像素宽度为669.39px       然后浏览器将其向下舍入到最接近的整数，导致实际宽度为669px。

<强> Reference Link

Answer 5

为什么不使用 .getBoundingClientRect() ？

$('whatever')[0].getBoundingClientRect().width