JQuery .width() 返回的宽度与显示的宽度明显不同答案

【问题标题】：JQuery .width() returns significantly different width than displayed widthJQuery .width() 返回的宽度与显示的宽度明显不同
【发布时间】：2021-04-24 03:26:50
【问题描述】：

我正在尝试计算仅包含文本的 div 的宽度。看起来很简单（我认为。）返回的值与 Google Chrome 开发人员面板中显示的宽度有很大不同。我试图在线搜索答案，但我只看到有关外宽度、内宽度和填充/边距/等问题的答案。我不相信这是问题所在，但如果我错了，请纠正我。我将附上我认为相关的 HTML、CSS 和 JS。如果这是一个无知的问题，我真的很抱歉；我已经尽力自己解决问题。所有的宽度函数都返回相同的值（甚至是普通的 JS），并且值的差异取决于 div 中文本的长度。如果有帮助，我很乐意提供任何进一步的信息！

HTML：

<div class='goal-cont'>
  <div id='goal-bar'>
    <div id="goal-progress"></div>
    <div id='title'></div>
    <div id='progress-text'>
      <span id='goal-current'>0</span>/<span id='goal-total'>0</span>
    </div>
  </div>
  <!--<div id='goal-end-date'></div>-->
</div>

CSS：

#title {
  font-family: 'Montserrat';
  font-weight: 800;
  font-style: italic;
  font-size: 25px;
  position: absolute;
  top: 25px;
  //left: 20px;
  transform: translateY(-50%);
}

JS：

$('#title').html(obj.detail.title);
console.log($('#title').width());

这里有两张我看到的结果图片（不能附加没有 10 名声望的图片）：

Chrome 中显示的宽度：https://imgur.com/BKP6i6i.png

JQuery计算的宽度：https://imgur.com/Z9iVIcw.png

【问题讨论】：

标签： jquery css width

【解决方案1】：

我找到了解决问题的方法。显然我在设置宽度后过早地调用了它。进一步调用该行返回正确的值。

【讨论】：