获取元素的实际浮点宽度

Posted 2023-03-06

【中文标题】获取元素的实际浮点宽度

【英文标题】：Getting the actual, floating-point width of an element

【发布时间】：2012-08-08 02:25:29

【问题描述】：

我正在使用 jQuery (v1.7.1)，我需要获取元素的绝对浮点宽度，但 jQuery 的所有宽度方法似乎都在四舍五入宽度值。

例如，如果一个元素的实际宽度为20.333333px，jQuery 的宽度方法返回20，即忽略十进制值。

你可以在jsFiddle看到我的意思

所以，我的问题是：如何获取元素宽度的浮点值？

【问题讨论】：

Do not round .width() in jQuery的可能重复

可能要检查这里：***.com/questions/4308989/… 似乎浏览器截断了像素，所以这可能不是您的 jquery 的问题。

jquery width 函数总是返回 int 值，因此你永远不会得到浮点值。见 - api.jquery.com/width

谢谢@JohnKoerner，我之前找不到这个问题，但我仍然想知道是否有任何可能的解决方案？某种检索元素浮点宽度的方法，因为 CSS 属性似乎确实持有它（至少当我使用 Chrome 的控制台检查时）

当显示某些东西时，它只能显示在整个像素边界上。没有半像素宽度这样的东西。

【参考方案1】：

如果您已经拥有对 DOM 元素的引用，element.getBoundingClientRect 将为您提供所需的值。

该方法从 Internet Explorer 4 开始就存在，因此在任何地方都可以安全使用。但是，width 和 height 属性仅存在于 IE9+ 中。如果您支持 IE8 及以下版本，则必须计算它们：

var rect = $("#a")[0].getBoundingClientRect();

var width;
if (rect.width) 
  // `width` is available for IE9+
  width = rect.width;
 else 
  // Calculate width for IE8 and below
  width = rect.right - rect.left;

getBoundingClientRect 在 Chrome 28 中比 window.getComputedStyle 快 70%，在 Firefox 中差异更大：http://jsperf.com/getcomputedstyle-vs-getboundingclientrect

【讨论】：

根据 Mozilla Network Developer 的说法：getBoundingClientRect() 是从 ie4 开始引入的，但 width 和 height 属性仅在 ie9 上引入。所以对于 ie8 你必须计算它top - bottom 和right - left。没有什么重要的只是为了完全准确。

@Ghetolay，我没有意识到这一点；感谢您指出。我会在我的回答中添加说明。

这实际上不适用于 ie9。在 ie9 getBoundingClientRect 返回四舍五入的值，而不是询问者想要的浮点宽度。在 ie9 中获得准确值的唯一方法是使用 getComputedStyle。 jsfiddle.net/JoolsCaesar/z6bx2moh

@Ghetolay - 小修正，高度应该是bottom - top，否则你会得到一个负数。

@jools 你能看看这个更新的小提琴，如果你知道怎么做，可以帮助我吗？谢谢。 jsfiddle.net/z6bx2moh/18 我正在尝试获取具有动态宽度的元素的浮点宽度并且溢出了......

【参考方案2】：

试试这个：

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

更新小提琴：http://jsfiddle.net/johnkoer/Z2MBj/18/

【讨论】：

getBoundingClientRect 比 getComputedStyle 快 70% 并提供相同的维度：jsperf.com/getcomputedstyle-vs-getboundingclientrect

要添加到@ssorallen 的评论，getComputedStyle 返回一个字符串，而getBoundingClientRect 返回一个浮点数。

getBoundingClientRect 不会返回与getComputedStyle 相同的值，如果元素受到任何 CSS 转换的影响，那么getBoundingClientRect 将返回转换后的值。

在 IE9 中，getBoundingClientRect 返回四舍五入的值，getComputedStyle 返回浮点值（一旦通过 parseFloat）以去掉“px”。 jsfiddle.net/JoolsCaesar/z6bx2moh

对于它的价值，我刚刚在 chrome 中运行了一些基准测试，getComputedStyle() 比 getBoundingClientRect() 快