$('label').css('width') 在 Chrome 中返回错误值

Question

在页面加载时，Bootstrap 的 navbar 会填充标签，直到不再适合它为止。我正在通过$('label').css('width') 使用他们的width 属性执行此操作，它在FF 中运行良好，但是当我在Chrome 中测试它时，标签溢出navbar 和视口。

调试代码我注意到 Chrome 中 $('label').css('width') 返回的值与浏览器检查器选项卡中的值相差甚远，在 Computed 下：

和console.log(parseFloat($('label').css('width'))) 输出：64.725

另一方面，在 FF：

和console.log(parseFloat($('label').css('width'))) 输出：82.4，这是正确的提示。

HTML

<label class="btn btn-light" data-original-title="" title="">
    <a class="btn" href="http://localhost">
        <img src="images/amazon.png">&nbsp;TEXT
    </a>
</label>

我的问题是，如何获取Chrome中标签的实际宽度？

感谢

更新

尝试了所有这些

$('label')[0].clientWidth; //63
$('label').get(0).offsetWidth; //65
document.defaultView.getComputedStyle($('label')[0])['width']; //64.725px
$('label').css('width'); //64.725px

它们甚至都没有接近图像中计算出的宽度

临时（希望）解决方案：

是标签里面的图片

这特别奇怪而且很难找到，因为请记住，它在浏览器中有效，而在其他浏览器中无效。

碰巧的是，我在图像加载到标签之前查询标签的宽度，导致它产生误导性的结果。

我使用的是$(window).ready()，虽然被指控有罪，但不是$(window).on("load", () => {}) 或window.onload = () => {} 或window.addEventListener('load', () => {}) 使它起作用，尽管第一个和其余部分之间的主要区别之一是$(window).ready() 执行只要 DOM 是可操作的并且不等待图像加载，而其余的则等待此类图像，尽管 Chrome 认为这不是当前的优先事项。

猜猜谁解决了这个问题：this post。

确实是个 hack，但确实，setTimeout(() => {}, 0) 是这次的英雄，是的，尽管如此，超时时间为 0。现在代码实际上是在等待图像加载。

注意：我也切换到window.onload = () => {}，以防万一。

我希望这可以节省别人的时间。

Answer 1

尝试使用getComputedStyle，但它只是只读的，无法为DOM设置值

document.defaultView.getComputedStyle(DOM)['width'];