Question

我正在尝试计算仅包含文本的 div 的宽度。看起来很简单（我认为）。返回的值与 Google Chrome Developer 面板中显示的宽度明显不同。我试图在线搜索答案，但我只看到有关外层宽度、内层宽度和填充/边距/等问题的答案。我不认为这是问题所在，但如果我错了，请纠正我。我将附上我认为相关的 HTML、CSS 和 JS。如果这是一个无知的问题，我真的很抱歉；我已尽力自行排除故障。所有的 width 函数都返回相同的值（甚至是 vanilla 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

Answer 1

我找到了解决问题的方法。显然，我在设置宽度后过早地调用了宽度。后续调用返回了正确的值。

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

1 个答案: