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

Question

我试图计算只包含文本的div的宽度。看起来很简单(我认为)。返回值与Google Chrome Developer面板中显示的宽度有很大不同。我试图在网上搜索答案，但我只看到关于outerWidth, innerWidth和填充/边距/等问题的答案。我不认为这是问题所在，但如果我错了请纠正我。我会附上我认为是相关的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://i.stack.imgur.com/bZkVW.png

宽度由JQuery计算:https://i.stack.imgur.com/UUfOW.png

Answer 1

我已经找到了解决这个问题的方法。显然，我在width设置后不久就调用它了。