在 DOM 中动态附加的 <span> 的宽度

width of a <span> appended dynamically in DOM

嗯,这看起来很简单,但我无法弄清楚这里出了什么问题。我已经动态地附加了一个 <span> 如下:
$("#parent").append("<span style='display:inline-block; position:absolute; background:yellow; z-index:10; top:12px;' id='mathBox"+flag_id+"'></span>");

现在我需要在按下某个键时找到这个 <span> 的宽度(在我的例子中是 TAB!)。
最初我试过 jquery 这样的:
var width_of_text= $("'mathBox'+flag_id").width(); alert(width_of_text);
但这在控制台中显示错误,未识别此表达式(即使我觉得这里有些不对劲!!)
然后我尝试使用 vanila JS 如下:
var mathBox_id=document.getElementById('mathBox'+flag_id); var width_of_text= mathBox_id.offsetWidth; alert(width_of_text);

现在这工作正常但它显示错误的宽度。 <span> 元素出现在 DOM 上(在测试它时),几乎没有 25 宽度,但它显示其宽度为 111 宽度。
我知道我一定是在做一些愚蠢的事情,但我就是没能抓住它..
请帮忙!!

jQuery 版本的语法是

var width_of_text= $('#mathBox'+flag_id).width();
alert(width_of_text);

var width_of_text= $('mathBox'+flag_id).width(); 使用带有 id 的 # 符号。

var width_of_text= $('#mathBox'+flag_id).width();