我正在尝试计算仅包含文本的 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
答案 0 :(得分:0)
我找到了解决问题的方法。显然,我在设置宽度后过早地调用了宽度。后续调用返回了正确的值。