如何精确地实现$ .width（）

Question

如何计算块元素的精确宽度，不包括填充，滚动条，边框和边距？我知道我可以使用$(element).width()，但jQuery不会计算确切的值，因为它会静默地舍入小数部分。 （请参阅我之前的问题here。）

我能想到的唯一方法是使用.getBoundingClientRect().width并减去不需要的东西。必须有比这更好的东西，但它是什么？

Answer 1

使用Javascript，您还可以使用getComputedStyle（）。不知道jquery替代

var element = document.getElementById("a");
alert(window.getComputedStyle(element).width);

Answer 2

jQuery并没有默默地舍入值。 jQuery返回浏览器计算值。由于浏览器无法显示像素的一小部分，因此浏览器本身正在为元素计算更合适的值。 jQuery实际上返回了正确且最精确的值。

以此代码为例：

<div style="width:201px;">
  <div style="width:50%;"></div> <!-- this renders as 100px, not 100.5px -->
</div>

在一个201px宽的元素中有一个宽度为50％的div。 根据您的假设，每个div的宽度应为100.5px。但是，如果使用任何浏览器开发工具检查子元素，您会注意到它实际上只渲染为100px宽而没有小数值。